前言#
這次更新整個網站最大的目標就是要使用跟過去完全不同(或是完全沒用過)的技術來建立， 入行以來最先接觸到的前端Framework就是Vue， 到目前為止也還是使用Vue做為前端核心框架， 加上待的公司都是接案型公司， 很少有機會能使用到其他的框架來開發， 唯一想得到的只有信義房屋 投資人專區， 是採用React來開發，但當時礙於開發時程短，並沒有很認真研究React的更多可能性。
接案公司最常被客戶詢問的就是SEO的問題，然而SEO在CSR的架構下並沒有完美的解法，只能盡可能的優化SEO， 而採用SSR架構的話，所有資料在Server端都已經被渲染完成了，便可以很好的解決問題癥結點， 加上Nuxt，Next等SSR框架越來越成熟，主要功能也趨近齊全，紛紛發佈穩定版本，感覺是很好的時機來探索新的架構！
Why Next.js#
也因此這次改版，在選擇前端的Framework時想當然爾，必需好好的玩一玩React，精確地來說是使用Next.js來作為開發的框架。
Next.js 是什麼就不多做介紹了，Next官網介紹的一目瞭然。
之所以會選擇使用Next來做，有四大原因：
- 前端的宗教戰爭永遠脫離不了框架之戰，
為了加入戰爭，我需要了解一下框架優劣，好選擇加入哪邊的戰隊 - 設法將公司模板多元化，導入React或是Next對接案型公司來說，是提升拿案的利器
- 體驗看看Server Side Rendering與Client Side Renderingy在實際開發的過程中的差異
- Next官網好帥，我也想那麼帥
啊！不是！我發現最先接觸到的Framework是jQuery，剛開始的幾個專案混雜jQuery, Vue開發，整個專案真可說是肥美多汁！
Why Prisma#
Prisma是基於ORM(Object Relational Mapping)架構的改良版，強化了ORM的優勢，並且稍微改善了劣勢， 讓我不需要花時間處理SQL語法，只需建立好Model, Relation之後就可以開始進行串接了，這個網站的Project單元，就是使用Prisma建立。
Why Contentlayer#
這次的網站會加入文章系統，但短期內並沒有打算為了文章系統特地打造一個可視化編輯器(WYSIWYG editor)的後台出來，這樣開發及維護時間成本太高了，所以選擇使用最簡單的Markdown的方式來進行文章的編輯與發佈管理。 而Contentlayer雖然還在Beta階段，但目前已經支援像是：高度整合Next.js、支援擴充MDX格式、可定義文章欄位，搭配一些設定就可以對欄位進行篩選與判斷。
簡單來說，只需要建立好資料夾結構，並設定好config檔案，一切就完成了。
Why Code Hike#
說到底，這是一個前端工程師的網站，文章中多多少少會分享一些code，也因此找一套好看又好用的syntax highlight就非常重要， 而Code Hike就是一套可以在markdown中 hightlight code的套件， 跟知名的highlight.js相比， 個人更喜歡Code Hike，Code Hike內建支援許多針對syntax hightlight的互動效果，比起highlightjs，這套的主題我更加喜歡，總之一個字：帥！
_10const hello = (name) => {_10 console.log(`Hello, `, name);_10}_10hello('Apple')
不信你可以hover一下！
Final#
這次更新網站的過程真的蠻好玩的，嘗試了很多新的技術(前端的技術 沒有學完的一天欸)，學到不少新東西，希望在更熟練Next之後，可以嘗試將Next導入公司的技術範疇中。
雖然如大家所見，本站前台目前已經正式上線並且穩定運作中，但實際上後台的開發依然持續在進行中，希望之後在專案作品的維護與管理上，會更加方便。