我用 Next.js 做這個部落格：static export 的取捨與心得

你現在看的這個站，就是用 Next.js 做的。當初選技術、決定架構時做了一些取捨，過程裡踩到的、想通的東西，正好可以拿來當一篇真實的案例分享。這篇不是 Next.js 的功能清單，是我做這個站的實際決策紀錄。

為什麼選 static export

這個站的本質是內容：文章和幾個純前端的工具。沒有需要即時運算的後端、沒有使用者登入後的個人化資料。對這種網站，我選了 Next.js 的靜態匯出（static export）——build 的時候把每一頁都產生成靜態 HTML，部署上去就是一堆靜態檔案。

好處很實際：

• 沒有伺服器要養，部署到任何靜態主機或 CDN 都行，成本極低、幾乎不會掛
• 快。使用者拿到的是預先產生好的 HTML，首屏很快
• 安全面積小，沒有後端就少了一整類後端的攻擊面

代價是：沒有伺服器端的動態能力。所以任何「每次請求都不一樣」的功能我都得放棄，或改用純前端的方式做。對這個站來說，這個取捨完全划算。

內容即資料，頁面用程式產生

我沒有把每篇文章手刻成一個個 HTML，而是把文章當成資料，集中放在一份資料檔裡，再讓 Next.js 依資料自動產生每一頁。新增一篇文章就是多一筆資料，網站地圖（sitemap）也跟著自動更新。這讓內容的維護變得很單純，不用每次都去動版型。

SEO 要靠每頁的 metadata

部落格最在意被搜尋引擎找到。Next.js 讓我可以為每一頁產生獨立的標題、描述、Open Graph 標籤、canonical 連結，而不是全站共用一組。這件事對 SEO 影響很大——搜尋引擎和社群分享看的就是這些。我也順手為文章加了結構化資料（JSON-LD），讓搜尋引擎更懂這是一篇有作者、有發佈時間的文章。

工具頁是純前端，資料不出瀏覽器

站上的開發工具（Base64、JWT 解碼那些）全部在瀏覽器本地執行，沒有把你輸入的東西送到任何伺服器。這既是隱私上的考量，也剛好和 static export「沒有後端」的架構天然契合——這些工具本來就不需要後端。

踩到的取捨：互動與靜態的界線

static export 下，有些 Next.js 的伺服器端功能用不了，得想清楚哪些東西是「build 時就決定」、哪些是「使用者在瀏覽器裡才發生」。像語言切換、工具的互動，這些都得設計成純前端、在客戶端處理。一開始要轉個彎，但想清楚這條界線之後，整個架構反而很乾淨。

小結

用 Next.js static export 做這個站的心得：

• 內容型網站＋純前端工具，static export 是很划算的選擇：便宜、快、難掛、攻擊面小
• 把內容當資料、用程式產生頁面，維護單純、sitemap 自動更新
• 認真做每一頁的 metadata 與結構化資料，這是部落格 SEO 的關鍵
• 純前端工具與「沒有後端」的架構天然契合，也保護了使用者隱私
• 想清楚「build 時」與「瀏覽器中」的界線，架構就會乾淨

選技術沒有最好，只有最適合。對這個站，少即是多。