Max Chu我的個人網站同時掛在 GitHub Pages 與 Vercel 上，兩邊都從同一個 repo 自動發布。做法是把 Next.js 15（App Router）設成 output: "export"，build 之後產出一個純靜態的 out/ 目錄——沒有 Node server、沒有 serverless function，任何能放靜態檔案的地方都能部署。
為什麼選純靜態匯出
個人作品集網站的內容本來就不需要即時運算，純靜態的好處非常實際：免費的託管選擇多、CDN 快取單純、不用煩惱 server 的冷啟動與費用。同時又能保留 Next.js 的開發體驗——元件化、Sass 支援、路由結構，這比直接手寫多份 HTML 好維護太多。
設定重點
next.config.mjs 裡有三個關鍵設定：output: "export" 開啟靜態匯出；images.unoptimized: true，因為靜態匯出無法使用 Next 的圖片優化伺服器；trailingSlash: true，讓 /zh 這種路徑解析成 /zh/index.html，這在 GitHub Pages 這類純檔案伺服器上才不會 404。
Vercel 那邊的坑
Vercel 偵測到 Next.js 專案時會預設用 framework: "nextjs" 模式，去 out/ 目錄找 .next/ 才有的 routes-manifest.json，結果就是部署成功卻整站 404。解法是在 vercel.json 明確設定 framework: null、buildCommand: "next build"、outputDirectory: "out"，讓 Vercel 只負責跑 build、把 out/ 當成純靜態目錄發布。
其他踩雷筆記
如果 build 時遇到莫名其妙的 PageNotFoundError，多半是 .next 快取陳舊，rm -rf .next 之後重 build 通常就好了。另外 WebGL、localStorage 這類只存在於瀏覽器的 API，記得用 next/dynamic 搭配 ssr: false 或包在 useEffect 裡，否則靜態匯出在 server 端 prerender 時會直接報錯。
一套程式碼、兩個發布管道、零伺服器成本——對個人網站或行銷頁來說，這個組合我用得非常滿意。