從 Hugo 轉為使用 Next.js 14 建立部落格

使用 Hugo 建立部落格已經兩年多了，其實使用方法包含寫文章、建置都還蠻順暢的，不過在工作的專案中使用 next.js 建立電子商物系統後，發現 next.js 真的是太好用了，所以便在還很熟悉的情況下，想說來實作一個部落格好了。

其實使用 Hugo 最大的好處就是不太需要有編程的技術，只要學會基本的操作並且在網路上找到適合的主題樣式，就有基本的部落格功能可以使用，優點就是快速無腦。但這就造就了若想要調整至適合自己的網站或是添加額外的功能就會變成比較困難。但也可能是我技術還不夠加上不熟悉 Golang 的一些語法導致哈哈。

所以這次選擇棄坑的原因，就只是因為每次想要修改一下網站邏輯或是外觀時，發現越來越改不動了哈哈。而且 Hugo 也只支援靜態網站，若網站持續經營，總是會想外加各種功能，對於只能產生靜態網站的 Hugo 就不好實作。而文章也因為是由 Markdown 編寫而來，若是想要有其他效果時，還需要透過 Shortcode 的方式來處理，有夠麻煩。

會使用 Next.js 的原因是因為 React 的生態圈豐富有非常多的套件可以使用讓開發更快速，並且實作各種功能。而且 Next.js 還支援了靜態網站生成 SSG（Static Site Generation） 和伺服器端渲染 SSR（Server Side Rendering）與客戶端渲染 CSR (Client Side Rendering)，讓網站可以實作更多功能並兼顧 SEO，在部署的選擇上可以使用 Vercel，操作簡單容易使用，連接 GitHub Repository 就能有 CI/CD 自動部署，在一定的使用量下都是免費的，目前使用到現在體驗極好👍。

因為已經使用 Hugo 透過 Markdown 建立了許多文章，目前這也是最合適的方式並不需要改變，如果想無痛轉移，也就必須繼續使用 Markdown 撰寫文章，並透過 Next.js 渲染，這樣才能完整地將原有的文章移轉過去。

基本上就是復刻原有網站的基本功能，文章列表、類別、標籤與多語系。以下文章為實作時的一些紀錄，有時間會再多補充😎:

使用 Next.js 建立部落格 - 渲染 Markdown 資料

使用 Next.js 建立部落格 - 實作多國語系i18n

Next.js 14 使用 Fuse.js 實作站內搜尋功能

使用 Next.js 實作完部落格後，感覺非常棒，除了文章的頁面使用靜態生成(SSG)速度超快外，偶爾想要增加點功能，需要撰寫 API 也行，畢竟 Next.js 也是支援 API 的，而佈署在 Vercel，API 也能以 serverless 的形式執行，適合有事沒事就想嘗試新功能的老鐵們入坑😎。

Next.jsReactWeb

Alvin

軟體工程師，喜歡金融知識、健康觀念、心理哲學、自助旅遊與系統設計。

Next.js 14 使用 Fuse.js 實作站內搜尋功能

使用 Next.js 14 實作多國語系i18n

使用 Next.js 14 渲染 Markdown 資料

Next.js 14 環境設置、建立、專案結構

ASP.NET Core API & Blazor 實作快取機制提升效能

ASP.NET Core Blazor 基本概念與模型選擇 (Server vs WebAssembly)