什麼係 Next.js？畀 app 建構者嘅淺白指南
Next.js 係一個用 React 建網站同網頁 app 嘅框架。React 俾你介面嘅基本積木——按鈕、表格、清單。Next.js 再補上圍繞住呢啲積木嘅網站其他部分：頁面同網址、喺伺服器上渲染頁面令佢一到就可以閱讀、載入資料，以及喺同一個項目入面運行後端程式碼。佢係開源嘅，由 Vercel 公司開發，亦係最多人用嚟建 React 網站嘅方法之一。
用 AI 寫嘢時點解 Next.js 重要
當你向 AI builder 描述一個 app，佢要揀一個技術基礎。呢個選擇會影響你之後最在意嘅嘢：
- 搜尋能見度。 一個需要喺 Google 排名嘅公開網站，會受惠於送出真正嘅 HTML，而 Next.js 好擅長呢點。
- 後端放喺邊。 Next.js 令前端頁面同伺服器程式碼（例如「儲存呢張表格」或者「調用付款 API」）可以放喺同一個項目入面。
- 託管。 有伺服器功能嘅 Next.js app 需要一部伺服器去運行，而純 Vite app 就可以當靜態檔案提供。
Mythex 新項目預設用 Vite + React + TypeScript + Tailwind，當你要求時先用 Next.js——喺第一個提示入面講「用 Next.js」就夠（點樣揀技術）。所以知道幾時值得要求，會有幫助。
日常比喻
如果 React 係一盒高質素嘅樂高積木，咁 Next.js 就係一套已經附埋說明書、底板，以及門同水管零件嘅樂高套裝。
你可以用散裝積木砌同一間屋——只係要自己決定房間點樣接駁、大門喺邊、水點樣入嚟。Next.js 就以標準方式幫你決定呢啲嘢，所以每個 Next.js 項目嘅佈局都差唔多，新嘅開發者（或者 AI）都可以好快搵到路。
Next.js 為 React 加咗咩
| 功能 | 對你嘅意思 |
|---|---|
| 檔案式路由 | 每個頁面就係一個檔案。app/pricing/page.tsx 呢個檔案會變成 /pricing 頁面。唔使額外設定。 |
| 伺服器渲染 | 頁面可以喺每次請求時，喺伺服器上建成 HTML，所以顯示得快，搜尋引擎亦讀得到。 |
| 靜態生成 | 好少改動嘅頁面可以事先建好一次，然後非常快咁提供。 |
| Server Components（伺服器元件） | 頁面嘅部分可以只喺伺服器上運行——直接讀取資料庫——然後送出完成嘅 HTML，而唔係程式碼去瀏覽器。 |
| Route handlers 同 server actions | 後端程式碼，例如 API 端點或者表格處理器，同頁面放喺同一個項目入面。 |
| 內建優化 | 圖片縮放、字型載入同程式碼分割都幫你處理好。 |
Next.js 有兩種組織頁面嘅方式。App Router（app/ 資料夾）係較新嘅一種，支援 Server Components。Pages Router（pages/ 資料夾）係原本嘅方式，目前仍然支援。新項目一般用 App Router。如果你 AI builder 嘅程式碼或者教學睇落陌生，原因通常就係呢度。
實例：一個公開嘅本地咖啡店目錄
想像一個網站，列出你城市嘅咖啡店，每間店一個頁面，並且希望佢喺搜尋結果入面出現。
一間咖啡店嘅 Next.js 頁面大概會咁樣：
// app/cafes/[slug]/page.tsx → /cafes/blue-door, /cafes/hilltop ...
export default async function CafePage({ params }) {
const { slug } = await params;
const cafe = await db.cafe.findUnique({ where: { slug } });
return (
<main>
<h1>{cafe.name}</h1>
<p>{cafe.address}</p>
</main>
);
}
當有人（或者 Google）瀏覽 /cafes/blue-door，會發生以下嘅事：
- Next.js 將網址對應到嗰個檔案。
[slug]資料夾嘅意思係「任何一間咖啡店」。 - 元件喺伺服器上運行，從資料庫讀取嗰間咖啡店，並建成 HTML。
- 瀏覽器收到一個完整嘅頁面，裡面已經有咖啡店嘅名稱同地址——唔使等 JavaScript 去攞資料。
如果係純客戶端 React app，瀏覽器會先收到一個差唔多空白嘅頁面，然後下載 JavaScript，再攞咖啡店資料，最後先顯示出嚟。搜尋引擎通常都可以處理到，但完整嘅頁面更加可靠。睇吓為 AI 建嘅網站做 SEO。
相比之下，一個登入後先可以用嘅員工儀表板，搜尋引擎本身都睇唔到，所以伺服器渲染帶嚟嘅好處較少，一個較簡單嘅 Vite app 往往更合適。
主要術語
| 術語 | 意思 |
|---|---|
| 框架（Framework） | 一套有慣例嘅結構，決定一個 app 點樣組織。Next.js 係框架；React 係函式庫。 |
| SSR（伺服器端渲染） | 每次訪問時，喺伺服器上建頁面嘅 HTML。 |
| SSG（靜態網站生成） | 喺部署時預先將頁面建成 HTML。 |
| CSR（客戶端渲染） | 瀏覽器載入後，用 JavaScript 建頁面。典型嘅 Vite + React app 就係咁運作。 |
| SPA（單頁應用程式） | 只載入一次，然後喺瀏覽器入面切換畫面、唔需要整頁重新載入嘅 app。 |
| Hydration（水合） | 瀏覽器「啟動」由伺服器送來嘅 HTML，令按鈕同表格變得可以互動。 |
| Route（路由） | 一個網址路徑，例如 /pricing，連同負責回應佢嘅程式碼。 |
常見誤解
- 「Next.js 取代 React。」 唔係。佢係用 React 嘅。你嘅元件仍然係 React 元件。
- 「Next.js 永遠係更好嘅選擇。」 佢功能更強，但亦需要理解更多嘢。伺服器渲染、快取，以及伺服器同客戶端程式碼嘅分別，都係令人困惑嘅 bug 常見來源。對於大部分內容都放喺登入之後嘅 app，純 React app 往往更簡單。
- 「Next.js 只可以喺 Vercel 上運行。」 佢係開源嘅，可以喺任何 Node.js 伺服器或者 Docker 容器上運行。如果唔用伺服器功能，亦可以完全靜態輸出。
- 「用 Next.js 就保證 SEO 好。」 佢令可讀嘅頁面更容易做到。排名仍然取決於標題、內容、速度同連結。
- 「Next.js 嘅伺服器程式碼自動係私隱嘅。」 標記俾客戶端用嘅程式碼最後會去到瀏覽器。秘密資料必須留喺只限伺服器嘅程式碼入面，並且放喺環境變數。
你可以叫 AI builder 做咩
- 「用 Next.js 嘅 App Router。」——如果你想用嘅話，放喺第一個提示入面。
- 「邊啲頁面喺伺服器渲染，邊啲係靜態，邊啲喺瀏覽器運行？點解？」
- 「令公開嘅營銷頁同清單頁做伺服器渲染或者靜態，並且有正確嘅標題同描述。」
- 「將 API key 放喺只限伺服器嘅程式碼同環境變數入面，並且話俾我知每個 key 喺邊度被讀取。」
- 「呢個 app 需要 Next.js 定係 Vite + React 會更簡單？我哋要建嘅係乜嘢？」
Mythex 入面嘅 Next.js
Mythex 預設用 Vite + React + TypeScript + Tailwind，當你喺提示入面要求時就轉用 Next.js；早啲講明會比之後先改慳 credits。你可以喺即時預覽睇到 app，而 Publish 會將佢部署到一個即時網址，唔使你自己設定託管。Mythex 嘅文件提到，客戶端渲染嘅單頁應用程式，SEO 比伺服器渲染或者靜態 HTML 弱，所以如果搜尋好重要，例如係營銷網站，最好一開始就講明（SEO for your app）。
常見問題
簡單嚟講，什麼係 Next.js？
Next.js 係建基於 React 之上嘅框架。React 負責建介面元件；Next.js 就補上圍繞住呢啲元件嘅網站其他部分——頁面同網址、伺服器渲染、資料載入同後端程式碼——等你可以喺一個項目入面建一個完整嘅網頁 app。
React 同 Next.js 有咩分別？
React 係一個用嚟建介面元件嘅函式庫。Next.js 係一個框架，用 React 並加上路由、伺服器渲染、靜態頁面同伺服器端程式碼。每個 Next.js app 都係 React app，但唔係每個 React app 都用 Next.js。
Next.js 對 SEO 比較好嗎？
可以係。Next.js 可以由伺服器或者預先建好嘅靜態頁面，向搜尋引擎同訪客送出完整嘅 HTML；而純客戶端 React app 送出嘅係一個差唔多空白嘅頁面，然後由 JavaScript 填充。標題、描述同內容好重要，仲重要過框架本身。
用 Next.js 一定要用 Vercel 嗎？
唔一定。Next.js 係開源嘅，由 Vercel 開發，但可以喺任何運行 Node.js 嘅伺服器、Docker 容器上運行，或者為唔需要伺服器功能嘅網站輸出靜態檔案。有啲功能喺 Vercel 上設定會比較容易。
我嘅 app 應該用 Next.js 定係 Vite？
如果係登入後嘅 app，例如儀表板或者內部工具，Vite + React 會更簡單，而且運作良好。當你需要搜尋引擎容易讀取嘅內容、有大量公開頁面，或者想喺同一個項目入面同後端程式碼一齊做伺服器渲染頁面，Next.js 就值得使用。