App Router 的震撼彈

在 Next.js 發布了第 13 版之後，整個前端界發生了一場大地震。他們推出了一個名為 App Router 的全新架構。

如果你以前學過 React，你可能會知道組件裡充滿了 useState (管理狀態)、onClick (點擊事件)。 但在 App Router 裡，所有的組件被無情地切分成兩個陣營：Server Components (伺服器端組件) 與 Client Components (客戶端組件)。

這也是目前 AI 在寫 Next.js 程式碼時，最容易發生「幻覺」或「報錯」的地方，所以你一定要搞懂它們的差別！

Server Components (伺服器端組件)

在 App Router 中，所有的組件「預設」都是 Server Components。

你可以把它想像成是在「機房裡」執行完畢的程式碼。

  • 優點：它可以直接連線到你的資料庫（因為它在伺服器上）、它可以放心地寫入 API Key 而不用怕洩漏給使用者、它的程式碼包體積是 0（因為它會直接變成純 HTML 送給瀏覽器）。
  • 致命缺點：它不能互動！因為它只負責產生靜態的 HTML，所以裡面不可以使用 useState、useEffect，也不可以綁定 onClick 事件。如果你在 Server Component 裡寫了 onClick，編譯器會立刻賞你一個大紅色的報錯。

Client Components (客戶端組件)

如果你想要做一個「點擊會加一的按鈕」或是「輸入框」，你就必須明確地跟系統說：「我要把這個組件丟到使用者的瀏覽器上執行！」

要宣告一個 Client Component，你只要在檔案的最第一行，加上這句神聖的咒語：

"use client";

加上這句話後，這個組件就會回到我們熟悉的 React 世界，可以自由使用所有的 Hook 與點擊事件。

為什麼不全部用 "use client" 就好了？

如果你全部加上 "use client"，那就等於放棄了 Next.js 一半以上的武功（回到原本 SPA 的缺點：檔案太大、SEO 可能不好、無法直接連線資料庫）。

最完美的現代化架構設計是： 把整個大頁面（例如：文章清單、部落格佈局）設定為 Server Component，只把需要互動的小零件（例如：按讚按鈕、留言輸入框）拆分出去寫成 Client Component，然後把小零件塞進大頁面中。

這樣就能同時擁有「完美的 SEO 與載入速度」加上「順暢的使用者互動」！

下一章我們將進入實戰，教你如何寫出能讓 AI 乖乖遵守這個最新規則的 Vibe Prompt！

🎁 [VIP 專屬加碼] Next.js 企業級效能調校與接案話術

客戶花錢請你做網站，最在乎的往往只有兩件事：「網站跑得快不快？」 以及 「Google 搜尋能不能排在第一頁？」 這也是為什麼你必須精通 Next.js。在這個 Bonus 章節中，我們將教你如何把 Next.js 的效能發揮到極致，並把它變成你報價單上的黃金條款。

1. 終極武器：Next.js Image 元件 (next/image)

傳統網站載入慢，90% 的原因是因為圖片太大。 如果你在 Next.js 裡面使用傳統的 <img src="...">，Cursor 的 linter 會立刻給你一個警告。 你必須學會使用 Next.js 專屬的 <Image> 元件。

✅ Vibe Prompt 示範：

「請幫我把這個區塊的圖片改用 next/image 元件。

  1. 請設定 layout="fill" 與 objectFit="cover" 讓圖片響應式填滿容器。
  2. 因為這是首頁的第一張大圖 (Hero Image)，請加上 priority 屬性，告訴瀏覽器優先載入這張圖，以提升 LCP 分數。」

只要加上 priority 這個字，你的網站在 Google 的 Core Web Vitals (核心網頁指標) 評分上就會大幅躍升。當你把這份滿分的報告截圖給客戶看時，他們會覺得這筆錢花得太值得了。

2. 靜態生成 (SSG) vs 伺服器渲染 (SSR) 的商業選擇

Next.js 有兩種渲染模式，身為架構師的你必須懂得幫客戶做選擇：

  • SSG (Static Site Generation)：在部署 (Build) 的時候就把網頁變成純 HTML。
    • 適合場景：公司形象官網、部落格文章。
    • 優點：速度極快 (因為不需要去資料庫抓資料)，可以承受百萬流量不當機。
  • SSR (Server-Side Rendering)：每次使用者點擊時，伺服器才去抓最新資料畫出網頁。
    • 適合場景：電商商品頁、股票報價、個人儀表板。
    • 優點：資料永遠是最新的。

💡 接案談判話術： 你可以跟客戶說：「你們競爭對手的網站是用 WordPress 做的，只要同時有 1000 個人進站搶購，網站絕對當機。但我幫你用 Next.js 的 SSG 架構設計首頁，搭配 Vercel 的全球 CDN 邊緣節點。就算幾萬人同時進來，網站也一樣順暢，保證不會流失任何一張訂單。」 這就是把技術名詞，翻譯成老闆聽得懂的「賺錢語言」。

3. Vercel 部署隱藏地雷：環境變數 (Env Vars)

在將 Next.js 部署到 Vercel 時，最常發生的慘案就是「本機可以跑，上線全壞掉」。 這 100% 是因為你忘記在 Vercel 後台設定環境變數 (.env)。

請務必養成習慣：當你的專案使用了 Supabase 金鑰、綠界科技 API Key、或是 OpenAI 金鑰時。部署前，先去 Vercel 專案的 Settings > Environment Variables 把變數一個一個貼上去，然後才按下 Deploy。 守住這個細節，你就能確保每一次的專案上線都是完美的煙火秀！