現在你看到的這個網站

我想用利用React.js來實際寫一個專案，也想使用沒嘗試過的Next.js，正好！就拿來寫幾乎靜態的個人網站吧。

我遇到的難處

• 在畫UI的時候覺得很慌張，邊摸索著figma，邊在思考是否要在上面設計RWD。我擔心花太多時間在設計，希望盡快寫成真正的網頁
• 我不知道React該怎麼輸出並部署，有耳聞Next.js是React的框架，不過他能幫助我做些什麼？我能夠成功部署他嗎？
• 現在的CSS寫法有變化嗎？有更好的寫法嗎？

我解決和學習到的

我設計了大致上的樣式後，便開始動手撰寫網頁。邊撰寫就邊嘗試、排版RWD。

Next.js

我讀了官方的教學文件，發現文件很簡單易懂，它甚至還解釋了React的方便之處。 使用Next.js幾乎不必煩惱該如何編譯，也不必煩惱路徑設定，又能在開發時及時更新畫面，不愧是框架中的框架，只要專注在內容的撰寫就好，相當方便。 透過它既能享受到React更容易和使用者互動、能使用component來編排頁面的特色外，又能免除掉Client-side Rendering不利於SEO的特性，產生靜態網站或Server-side Rendering。

藉由這次機會時做了除了使用Next.js撰寫外，還用pm2讓專案能在背景執行，next.js的部署也非常方便。 不過目前看來還蠻消耗資源的，我在部署後觀察，發現CPU和Memory常常用盡，在執行build的時候也很難順利跑完。之後再持續觀察使用情況，看看有沒有辦法解決。

用新的方式來使用CSS

似乎是因為框架的關係，現在會使用Component作為單位來排版CSS，像是使用Styled components；或是用CSS Modules讓CSS變得像區域變數一般。 令我對現代的CSS寫法感到驚艷，我想嘗試看看CSS框架，我決定使用Tailwind。

一開始覺得寫起來實在太冗長了，寫法就像以前會把style寫在HTML裡，感覺上不進反退。 不過真的開始使用後發現這樣其實相當方便，一目了然每個元素中設定了哪些CSS，不用為了找margin、padding放在哪裡而花時間檢查。也能一目瞭然在RWD中做的各種變化。 另外省下非常多命名時間，讓英文詞彙不夠多的我終於不用煩惱class名稱該取什麼。也因為這樣能重複使用各個class，產生的CSS檔案不大。 缺點就是要花點時間查詢一下每個CSS對應到的class。

它的觀點也蠻有意思的：「如果有一直重複使用的style組合，試著思考看看能不能把他包成一個Component。」 讓我能多加思考是不是有更多能夠東西能組成Component，讓程式碼更加清楚、方便管理。

最後...

我利用沒有使用過的React和CSS框架完成了目前你看到的這個網站。 我不再是停留在2018年，藉此跟上目前前端流行使用的撰寫方式。網頁技術總是在變化，能夠理解各式各樣的觀點和寫法令我感到相當有趣。 之前在兼職行政助理時我很希望能夠讓同事自行使用我開發的程式，「要是能夠有個介面就好了！」當時讓我真正體悟到前端的重要性。 透過這個實作我開始更加了解前端，我非常開心，也很期待以後能完成更多事物！