什麼是 Next.js？給 App 製作者的白話指南

Next.js 是一個用 React 來建立網站與網路應用程式的框架。React 提供介面的基本組件，例如按鈕、表單與清單。Next.js 則補上圍繞它們的其他網站部分：頁面與網址、在伺服器上渲染頁面讓它們到達時就能直接閱讀、載入資料，以及在同一個專案中執行後端程式碼。它是開放原始碼，由 Vercel 公司開發，也是最廣泛使用的 React 網站建置方式之一。

用 AI 製作 App 時為什麼 Next.js 很重要

當你向 AI 製作工具描述一個 App 時，它必須選定一個技術基礎。這個選擇會影響你之後在意的許多事情：

• 搜尋能見度。 需要在 Google 上排名的公開網站，會受益於發送真正的 HTML，而 Next.js 在這方面做得很好。
• 後端放在哪裡。 Next.js 讓前端頁面與伺服器端程式碼（例如「儲存這個表單」或「呼叫金流 API」）能放在同一個專案中。
• 託管。 具有伺服器功能的 Next.js 應用程式需要一台伺服器來運行，而單純的 Vite 應用程式只需要以靜態檔案的方式提供即可。

Mythex 預設為新專案使用 Vite + React + TypeScript + Tailwind；當你要求時，則會改用 Next.js。在第一則提示詞中寫上「使用 Next.js」就已足夠（技術如何選擇）。因此，了解什麼時候值得提出這個要求，會很有幫助。

日常比喻

如果 React 是一盒高品質的樂高積木，那麼 Next.js 就是附上說明書、底板，以及門窗與水管零件的完整樂高套組。

你當然可以用散裝積木搭出同樣的房子，只是得自己決定房間如何相連、前門放哪裡，以及水管怎麼接。Next.js 則以標準的方式替你做好這些決定，因此每個 Next.js 專案的結構都相似，新的開發者（或 AI）也能很快找到方向。

Next.js 為 React 加上了什麼

Next.js 有兩種組織頁面的方式。App Router（app/ 資料夾）是較新的方式，支援伺服器元件。Pages Router（pages/ 資料夾）是最初的方式，目前仍然受支援。新專案一般使用 App Router。如果 AI 製作工具產生的程式碼或教學看起來陌生，通常就是這個原因。

實際範例：公開的咖啡廳目錄

想像你要做一個列出城市中咖啡廳的網站，每間咖啡廳一個頁面，並希望它能在搜尋結果中出現。

一間咖啡廳的 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 時會發生以下事情：

1. Next.js 把網址對應到該檔案。資料夾名稱 [slug] 代表「任何一間咖啡廳」。
2. 這個元件在伺服器上運行，從資料庫讀取咖啡廳資料並建立 HTML。
3. 瀏覽器收到的是一個完整的頁面，咖啡廳的名稱與地址已經在裡面，不需要等待 JavaScript 去抓取資料。

如果是一個純客戶端的 React 應用程式，瀏覽器會先收到幾乎空白的頁面，接著下載 JavaScript，再抓取咖啡廳資料，最後才顯示出來。搜尋引擎通常也能處理這種情況，但完整的頁面會更可靠。請參閱 AI 製作網站的 SEO。

相對地，一個需要登入、只供員工使用的儀表板，搜尋引擎本來就看不到，因此伺服器端渲染的好處較少，較簡單的 Vite 應用程式往往才是更合適的選擇。

關鍵術語

常見迷思

• 「Next.js 取代了 React。」 並不是。它使用 React。你的元件仍然是 React 元件。
• 「Next.js 永遠是比較好的選擇。」 它的功能更強大，但也需要理解更多。伺服器端渲染、快取，以及伺服器端與客戶端程式碼之間的差別，都是造成令人困惑的錯誤的常見來源。對於大多數內容位於登入之後的 App，一般的 React 應用程式通常更簡單。
• 「Next.js 只能在 Vercel 上運行。」 它是開放原始碼，可以在任何 Node.js 伺服器或 Docker 容器中運行。如果不使用伺服器功能，也可以完全靜態匯出。
• 「使用 Next.js 就保證 SEO 良好。」 它讓可讀的頁面更容易被理解，但排名仍取決於標題、內容、速度與連結。
• 「Next.js 的伺服器程式碼會自動保持私密。」 標記為客戶端使用的程式碼最終會送到瀏覽器中。機密必須留在僅限伺服器的程式碼與環境變數中。

可以向 AI 製作工具提出的要求

• 「使用 Next.js 與 App Router」——如果你想要的話，請寫在第一則提示詞中。
• 「哪些頁面在伺服器上渲染、哪些是靜態的、哪些在瀏覽器中運行？請說明原因。」
• 「讓公開的行銷頁面與列表頁面採用伺服器端渲染或靜態方式，並設定好正確的標題與描述。」
• 「把 API 金鑰保存在僅限伺服器的程式碼與環境變數中。告訴我每一個金鑰是在哪裡讀取的。」
• 「這個 App 需要 Next.js 嗎？還是對我們要做的內容來說，Vite + React 會更簡單？」

Mythex 中的 Next.js

Mythex 預設使用 Vite + React + TypeScript + Tailwind，並在你於提示詞中要求時切換為 Next.js；及早說明這個需求，比之後再更改能節省點數。你可以在即時預覽中查看 App，而發佈會把它部署到一個線上網址，無需自己設定託管。Mythex 的文件指出，客戶端渲染的單頁應用程式在 SEO 方面較弱，相較於伺服器端渲染或靜態 HTML；因此，如果你的行銷網站很重視搜尋，最好一開始就說明（App 的 SEO）。

常見問題