號外、號外——！（灑小花）
什麼事情，這麼開心呀？
我們的個人網站重新開張啦！
個人網站之夢
一直以來我都很想要有一個自己的個人網站，原因：
- 身為 Y2K 活化石，在那個剛有網路的年代，有一個…咳咳、當年說的 Homepage 是件多潮的事情啊！
- 我一直以來都斷斷續續有在寫些有的沒的。台灣流行過的平台，我幾乎用過。雖然我更喜歡改部落格樣式，但加減還是有在寫，有個人網站，聊勝於無。
- 現在因緣際會成為了 Web 前端，覺得更該自己做一個 & 繼續寫作。
那怎麼說 2025 重新開張？
可想而知，我的個人網站進化到現在已經是第 N 代了。
省略學生時代到轉職前搞過的留言板、部落格、微網誌、自架靜態網頁…就從轉職後開始說吧！
2019 年中，轉職成功歸成功，但我只花短短 6 個月半路出家，老實說每天都戰戰兢兢，下班後還繼續看各式教學影片、刷題、看文章自學，再加上桃北通勤，根本沒時間寫作，更別說做個人網站了。
到了 2022 年初，已累積 2 年多 Web 前端經驗的我，因疫情加上一些個人因素離職休息中。
期間整理了思緒，萌生重新開始寫作的念頭——這次想從無到有打造一個自己喜歡的小天地。於是乎，一段說長不長、說短不短的旅途就這樣開始了…
心目中的藍圖
我想得很簡單，就是要 Top、Blog、Post、Works、About 五大 page。
- Top 即首頁。 在日本文化當中，首頁叫 Top page 是一種慣例，我日文系畢業 + 哈日，當然要把首頁叫作 Top page。
- Blog 部落格文章列表頁。 要有 filter、pagination。filter 要兩個，一個篩系列文、一個篩標籤。
- Post 文章內頁。 當然就是用 MDX 技術，並且一定要有 table of content 在側邊。
- Works 作品集頁。 預計只會放個人專案。但作品要累積到我認可的一個數量後，我才會公開，不然很空 w
- About 自我介紹頁。 不免俗要來一下的。
嗯…好像也沒那麼簡單？
Next.js v12 Page Router + Remote MDX
2022 年的主流還是當時大家讚譽有加的 Next.js v12，當然那時也只有 Page Router 一擇，因為 App Router 是 v13 才出來，文章方面也無懸念的就是要用 Remote MDX 之類的。
快速做出了一版 MVP 部署，也發了幾篇文章後
- ChatGPT 問世，世界開始加速改變
- Next.js 推出 v13 App Router
- TypeScript 如火如荼的普及化
- 反思了自己設計的 UI/UX，覺得以部落格網站來說，似乎不太好，那大大滿版 banner 比較會在酷炫的作品集網站會看到，還有要處理 scroll 位置偏麻煩。
- 有了新工作，休息結束
關鍵的一點是 Next.js 官方宣稱，未來會拿掉 page router，所以我就決定長痛不如短痛呀！不然馬上就來重構 + migrate。
於是我重啟了新的 repo。
重構不如重寫，反正我網站規模很小也不趕時間呀！
Next.js v13 App Router + ContentLayer
身為第一批使用 App Router 的人，不意外踩到一堆官方的坑，而且當下也沒什麼好解法，畢竟整個開發者社群也都在試。
ContentLayer 方面，概念雖好，但跟 Windows 系統不合（我個人電腦是 Windows 桌機，畢竟有玩電玩的需求）。也可能是我當時還不夠熟悉的關係，文章有時編譯得出來、有時又壞掉，最後只好放棄。
不過這版開發停滯的主因，是我對網站整體 UI/UX 要怎麼做得又酷炫、又好閱讀文章毫無頭緒。甚至一度覺得乾脆回去用 FC2 算了，FC2 可不只是能改 CSS 還能改 HTML，還有一堆日本神人做好的 template 根本不用自己改就非常好看了；不然改用 Google 的 Blogger 也行，反正重點是內容嘛。
但… 我可是 Web 前端耶！自己的網站當然要自己手刻，還要弄得很酷炫才對吧！
就這樣陷入糾結，時間也就這樣一直流失。
嘗試改用 Astro
就在我陷入糾結的期間，我發現 Next.js 彷彿把開發者當白老鼠，光是 minor 版本就常常大改，每年還準時推一個大版。v14 期間，我看到網路上罵聲大於讚聲，於是認真考慮了：
換框架
我真心覺得 Next.js 再這樣下去，會被其他框架比下去淪為非主流，也完全提不起勁碰 v14（光是 client cache 問題就被罵翻，聽起來就超麻煩，乾脆不要用）。
當時我的 the next Next.js 候選名單有：Remix、Astro。
我跟一位同事聊過想用 Remix 的念頭，不過他過去使用經驗不佳，非常反對。後來我就嘗試了當時在日本開發者社群人氣急速竄升的 Astro。
那這版為什麼又沒做完？不是 Astro 不好用，它確實很適合做內容型網站，但越做越覺得 Next.js 那種 React Server Component（RSC）直接吃 searchParams 的寫法最對我胃口。
Astro 的 island 架構雖然我也願意花時間學，只是越學越感覺到這兩套框架的定位、想解決的問題不一樣，不是我本來想找的 the next Next.js。
於是我的開發再次停滯了。
嘗試使用 Next.js v15 + 串 Notion API
時間差不多來到 2024 年底，公司剛好有幾個新專案要起，我有機會決定技術選型。比較急迫的案子我用了末代 v14，比較緩的就拖到初代 v15 出來才開 repo，順勢為公司導入了 App Router。
實戰下來覺得 v15 似乎穩定許多了，於是私下也想：是時候回歸 Next.js 懷抱啦。
但 ContentLayer 怎麼辦？心想經過這麼久應該優化不少了吧，可以再相信它一次… 不過這時，我看向自己天天在用的 Notion，萌生了一個想法：
把 Notion 當成 Database & 文章編輯器，應該不錯吧！
文章隨時隨地想改就改，還有 UI 介面能填屬性，FrontMatter 都不用自己寫，而且 Notion 還有開放 API 供開發者串接，豈不完美？
實際做下去才發現… Notion API 沒有想像中的好用呀：
- block 型別非常多，處理起來很瑣碎。
- 非官方套件（
react-notion-x、notion-to-md… 之類的）反而比官方 SDK 好用。 - compound filter 巢狀只支援 2 層，要做到我想要的 AND、OR 組合，最後還是得撈下來自己跑雙迴圈過濾。
開發又双叒叕停滯了。
繼續使用 Next.js v15，但改用 ContentLayer2
時間來到 2025 年中。我的老天鵝，就這樣 3 年過去了！雖然真的不趕時間，但一做做了 3 年還沒好，中途還不斷實裝各種心血來潮的點子（等於自己給自己當了一回天馬行空的甲方），真的可以給自己貼上工程延宕的標籤了。
不過也多虧這幾年間我時不時刻意找內容型的網站參觀、閱覽：
我自己的小天地到底想長什麼樣，逐漸在我腦中清晰起來了。
畫面有了明確方向後，再集合經過了這些年也明顯進化許多的眾 AI 之力，也改用了 AI 們推薦我用的 ContentLayer2。
這次終於——！再次打造出了 MVP。買了網域、重新自己畫 Logo，就把網站上架啦，也就是你們現在看到的這樣子。
總結
雖然任性、也繞了不少路，總算推出了一個自己還算滿意的個人網站。
還有好幾個想做的 features 跟想優化的地方；也規劃了好幾個個人專案，等著我去執行、實作，才好填滿我現在尚未公開的作品集頁面。
這個小天地會繼續進化，敬請期待。
後紀：2026 最新定案 Next.js v15 + Content Collection
最近的某天，我發現 ContentLayer 原來早就因為找不到贊助商沒在更新了。ContentLayer2 也只是社群有熱心的工程師幫忙續命的而已，並不是長久之計。我找到了 Content Collections 並在 AI 協助下完成 migration。