Next.js
建立在 React 之上的全端框架，整合路由、SEO、伺服器渲染，本站就是用它做的。
還不熟這個主題？先看基礎： 前端 Frontend
一句話解釋
Next.js 是建立在 React 之上的全端框架，把路由、SEO、伺服器渲染都整合好。
白話文說明
Next.js 把 React 缺的那些「周邊」一次補齊：自動路由（檔案就是路由）、SEO 中繼資料、伺服器端渲染、靜態網站產生等。換句話說，React 是引擎，Next.js 是整台配好的車。
它對 SEO 特別友善——能在伺服器先把頁面內容準備好，搜尋引擎一抓就有內容。本站正是用 Next.js 的靜態匯出打造，再部署到 Cloudflare Pages，達成零成本又快又利於搜尋的目標。
架構圖
運作流程
SSR 還是 SSG：怎麼選
Next.js 產生頁面有兩種方式，選哪種其實只看一個問題：每個人看到的是同一頁，還是每位訪客都不一樣？
- SSG（靜態）：頁面提早產生一次，所有人拿到同一份 HTML。最適合內容站、行銷頁、文件與部落格（像本站）。
- SSR（伺服器渲染）：每次請求才即時產生頁面。當內容必須因人而異、或要即時更新時才用，例如登入後的後台、即時報價。
一個好用的原則：先用 SSG，等真的遇到「這頁不可能對所有人一樣」的理由，再把那一頁改成 SSR。
常見誤解：以為 Next.js 一定要有一台伺服器在跑。它其實是 React 加上一套慣例——也能完全靜態匯出（SSG）、不需任何伺服器。本站正是靜態匯出的 Next.js 跑在 Cloudflare Pages 上：$0、零冷啟動。只有當頁面真的得「每次請求即時產生」時才需要 SSR。
重點整理
- Next.js＝建立在 React 之上的全端框架。
- 內建路由、SEO、渲染，對搜尋引擎友善。
- 支援靜態匯出，本站即用它部署到 Cloudflare。
生活化比喻
像幫 React 裝好的『全配套件』：引擎是 React，Next.js 把方向盤、導航、音響都配齊。
優勢
- 內建路由、SEO、伺服器渲染，開箱即用
- 支援靜態匯出，可零成本部署到 Cloudflare
- 與 React 生態無縫，AI 支援極佳
缺點
- 概念比純 React 多（渲染模式等）
- 部分進階功能綁定特定平台
適用場景
- 需要 SEO 的內容站與行銷頁
- 想一套框架做完前後端的全端專案
不適用場景
- 只要極簡單一頁、不需框架的情境
新手評分卡
- 新手推薦度
- 3/5
- 學習成本(分數越高＝成本越高)
- 3/5
- 市場需求
- 5/5
- AI 生成友善度
- 5/5
常見問題
Next.js 和 React 差在哪？
React 只負責畫面；Next.js 在它之上補齊路由、伺服器渲染、SEO、圖片最佳化與部署，讓你做「完整的網站」而非只有前端元件。
做 SEO 友善的網站該用 Next.js 嗎？
很適合。它支援伺服器渲染與靜態匯出，能輸出搜尋引擎好抓的 HTML（本站就是 Next.js 靜態匯出）。
新手直接學 Next.js 會太難嗎？
建議先懂一點 React 再上手。Next.js 概念較多（路由、渲染模式），但官方教學完整，且 AI 對它非常熟，學起來不孤單。
參考來源
- Next.js Documentation — Vercel
- Next.js — Vercel