Oct 20 2022

從Gatsby.js轉換到Next.js

其實Gatsby.js並沒有什麼不好，只是他每一次改版都需要花費許多精力去做更新，我從1.0用到了3.0，最後4.0真的讓我痛下決心轉換到了Next.js的懷抱

雖然官方有介紹如何從Gatsby.js遷移到Next.js的範例，但說真的還有許多沒有寫清楚的地方這邊先做幾個紀錄

更新package.json

除離移除所有的Gatsby.js的套件外，還需要安裝幾個套件這幾個套件官方都有說明主要是為了渲染markdown的文件以及讀取markdown的文件的套件功能

在部落格中的markdown文件資料夾是這樣放的 src/posts/{post}.mdx

有了這些，就可以把文章列表的部分印出來了！

接下來要讀取markdown中的內容，並且渲染出整個html，然後我也有針對markdwon的element做客制處理，例如h1的渲染就會如同下方的html

另外官方給的方式，渲染移植會有錯誤（如下圖），所以自己做了一個呈現的頁面，讓畫面可以有更完整的客製化功能

渲染錯誤

在Gatsby.js可以透過gql把文章標籤弄出來但在next.js中就只能自己處理了..

我先在posts.ts中新加一個method，可以處理把文章的tag都列出來，然後在每一頁中添加印出tag的處理，這樣子就把原本Gatsby原有的功能做出來了！接下來差了分頁功能...

每一頁只顯示10篇文章，所以在index.tsx先hard code 只取得文章前10筆，接下來再運用getStaticPaths的方式就可以達成分頁功能了！