使用Next.js重構我的部落格

又到了一年一度鼓捣博客的時間咳咳，因為升級 gatsby 導致倉庫收到太多依賴警告了，同時意識到大而全的框架的一些缺點，所以決定捨棄 Gatsby 轉而使用 Nextjs

Gatsby vs Nextjs#

同為 React 生態中的頁面構建框架，他們均提供了 SSG 的功能，作為一個簡單的博客僅靜態導出就完全能夠達到我的需求了。

對於頁面數據的獲取上，Gatsby 和 Nextjs 差異在於 Nextjs 允許從任意的數據源獲取數據，僅僅需要在指定生命周期函數getStaticProps中返回相應的值即可，但是 gatsby 的數據源是基於graphql的，但是很多實現均依賴插件，很大程度上依賴社區和官方的工作。

當前文章內容都是通過本地文件系統保存，使用 Gatsby 和 Nextjs 基本等效，但是對於 Typescript 的支持 Nextjs 遠遠的將 Gatsby 甩在後面

本身是想將原先的使用 Nextjs 復現然後再進行更改，但是中途發現使用 MDX 來構建文章會比純 markdown 的展示效果更好。

但是在集成的過程中發現在 Nextjs 中使用 MDX 如果不作為 pages 頁面交給 Nextjs 處理則無法進行很好的自定義，但是通過next-mdx-remote 或 mdx-bundler在渲染的時候需要使用new Function()

雖然最後解決了這個問題，但是覺得不是很優雅，然後在尋找解決方法的過程中發現了一個模板，同時此模板使用了tailwindcss，近期我也總是有在使用同類型的windicss~~因為之前 tailwind 沒有 JIT 模式~~

然後就轉而使用該模板，很多佈局我覺得挺不錯的，但是其中的一些功能和頁面展示樣式我覺得還是需要改進，首頁之類的還過於簡陋。

在先前 Gastby 最後的版本中我使用了 Netlify CMS 來管理內容，基本也形成了 JAMStack 的結構，但是使用體驗來說着實還是差點，作為內容管理我覺得使用體驗不是很到位。

中途也嘗試用 Notion 來做內容管理，但多多少少又一些不如直接 markdown 來的效果好

現在目標是通過 Sukka 大佬的這篇文章使用 Next.js + Hexo 重構我的博客的啟發使用 hexo 與 nextjs 整合或者與 contentlayers 結合。

這個包的野心很大，目標是整合各種內容源 —— 無論是本地文件如 MDX、markdown、json、純文本或者是 CMS 都可以通過其進行管理

但其部分目標功能處於 wip 狀態，不過可能的未來能和 notion 集成我覺得挺香的。

Hexo 不僅是一個靜態站點生成器，其內部的數據庫還暴露了一系列 api 可以直接操作本地的文章

這部分可以參考 Sukka 大佬的文章和 hexo 官方文檔，而且有一方面的優點 hexo 可以基於文件系統將數據持久化，這個可以讓構建省去一部分的時間資源

同時 hexo 集成的一些功能如 rss 和 sitemap 生成可以讓我將現有的此部分內容重構為更簡單的代碼，還有很多 hexo cli 能提供的功能也是很香

其實國際化似乎對於我這個小博客沒有什麼多大的作用，但是一直在工作中用不上，就算是為以後的英文文章鋪路？會有嗎？

其實看倉庫的提交記錄就知道一開始是選擇next-i18next來做 i18n 的但是發現需要對所有動態路由手動增加 props，十分的麻煩，然後還是使用了next-translate

日後的計劃是對文章的 frontmatter 增加額外的 lang 屬性用於標識語言，然後在文章列表顯示語言標籤來標識文章內容的語言，以及可能未來有的雙語文章中切換語言就以後在做額外的處理吧。

不過格式化時間字符串似乎還是跟隨讀者的語言而變化的，這個還是有待改善的。

~~做字符串翻譯工作也好費時間~~

掛載 github 或者 vercel 看著怪 low 的，於是~~斥巨資~~購買了一個enpitsulin.xyz域名然後去 vercel 控制台綁定blog.enpitsulin.xyz，然後在阿里雲的控制台按照 vercel 給出的記錄添加解析設置，然後稍等一會就行了

但是好像現在還是要掛梯子，這部分以後在調整吧。

然後根域名就備案了放著為以後做學習用途吧。