馴服 AI 的幻覺：讓它寫出「最新版」的架構
因為 Next.js 從 Pages Router (舊版) 升級到 App Router (新版) 的變動實在太大，而網路上有很多舊的教學文章，導致 AI 的訓練資料裡充滿了過時的寫法。如果你只是單純地對 Cursor 說：「幫我寫一個登入頁面」，AI 非常容易寫出「舊版混搭新版」的四不像程式碼。
當你把這種四不像的程式碼執行下去，終端機就會噴出整夜都解不完的紅字錯誤。 為了確保 AI 產出的程式碼絕對能跑，我們在下達 Prompt 的時候，必須建立一套強大的「防護網」。
建立絕對防護網：Cursor Rules (系統級咒語)
如果你使用的是 Cursor，最強大的功能就是你可以為整個專案設定「底層規則」。
強烈建議你在專案的根目錄，建立一個名為 .cursorrules 的檔案，並寫下這段核心咒語，這樣 AI 每次回答都會自動遵守這些規則，你就不必每次都要重複講一遍：
🔥【請複製以下內容放入
.cursorrules檔案中】 你是一位精通 Next.js 14/15 App Router 的資深全端工程師。 在開發時請嚴格遵守以下規則：
- 預設使用 Server Components：除非必須，否則一律不使用
"use client"。- 狀態與互動隔離：只有當遇到
onClick,useState,useEffect等需要客戶端瀏覽器互動的情境時，才將該部分的 UI 拆分成一個獨立的小組件，並在該小組件檔案最頂端標註"use client"。- 不可逆向引入：絕對不可以把 Server Component import 到 Client Component 的
childrenprops 以外的地方。- 官方套件優先：請盡量使用 Next.js 內建的
<Image />與<Link />組件，而不是原生的<img>與<a>。- 資料獲取 (Data Fetching)：請直接在 Server Component 中使用
async/await呼叫資料庫或 API，不要使用舊版的getServerSideProps或getStaticProps。
當你設定好這個檔案後，你的 Cursor 就從一個「什麼都懂一點的菜鳥」，瞬間進化成了「嚴守 Next.js 最新規範的架構大師」。
實戰：請 AI 寫一個「連線資料庫的動態首頁」
當防護網建立好之後，你就可以用非常直白的口語來要求 AI 寫出強大的全端功能了。 我們現在要請 AI 幫我們寫一個部落格的動態首頁。
🔥【實戰 Prompt 範例】 我需要在
src/app/page.tsx建立一個首頁。
- 這是一個 Server Component。請幫我寫一個非同步函數
fetchPosts()，去資料庫（假設使用 Supabase 或直接用 fetch 呼叫你的 API）撈取最新的 10 篇文章資料。- 撈取到資料後，請用 Tailwind CSS 繪製出一個漂亮的卡片網格 (Grid) 來顯示文章的
title與summary。- 請為卡片加上 Glassmorphism (玻璃擬物化) 的透明質感與漸層背景。
- 進階要求：請另外寫一個獨立的
LikeButton.tsx(必須是 Client Component)，放在每篇文章卡片的右下角。這個按鈕必須有自己獨立的useState來控制按讚次數，點擊時必須有簡單的放大動畫。
為什麼這段 Prompt 價值連城？
- 你明確劃分了 Server 與 Client 的界線：這是 Next.js App Router 最難懂的概念，但你透過 Prompt 把大腦 (Server) 跟手腳 (Client 按鈕) 完美拆開了。
- 極致的效能與 SEO：因為主體頁面是 Server Component，這 10 篇文章會在伺服器就渲染成純 HTML，Google 爬蟲一秒鐘就能看完，這對網站排名有著決定性的幫助。
- 無損的互動體驗：雖然主頁面是純靜態的，但你把「按讚動畫」這個需要運算的負擔，精準地隔離在了一個小小的 Client Component 裡。
⚠️ [常見地雷區] 忘記寫 "use client" 的悲劇
在實作的過程中，你最常遇到的一個報錯畫面，就是大大的紅字寫著：
Error: Event handlers cannot be passed to Client Component props...
或是
Error: useState is not defined in Server Components...
原因與解法：
當你在一個 Server Component (也就是沒有在第一行寫 "use client" 的檔案) 裡面，綁定了 onClick={...}，或是使用了 useState。伺服器在執行到這一行時會直接崩潰：「我是伺服器！我沒有滑鼠可以 click 啊！」
遇到這個問題，有兩種解法：
- (偷懶但效能差) 直接在檔案第一行加上
"use client"，把整個頁面變成客戶端渲染。 - (專業 Vibe Coder 做法) 圈選這段報錯，然後問 Cursor：「請幫我把有
onClick或useState的那塊程式碼，獨立抽離成一個 Client Component，然後再把它 import 回來這裡。」
💼 [商業應用場景] 現代化 SEO 救星
為什麼各大企業（如 Netflix, TikTok, Twitch 等）都紛紛將前端架構轉向 Next.js？
因為傳統的 React 網站，被稱為 SPA (單頁應用程式)。Google 爬蟲進來時，只會看到一個空蕩蕩的 <div id="root"></div>，這對注重自然流量 (SEO) 的電商或內容網站來說是致命傷。
當你掌握了 Next.js 的 Server Component 架構，你可以向客戶報價：
「你們現在的 React 官網雖然漂亮，但 Google 根本搜不到你們的商品。我能幫你們用最新的 Next.js App Router 重構，保證每一頁商品都有專屬的 HTML 與 Metadata 標籤。這個『SEO 企業級重構專案』，建置費 15 萬元，能幫你們省下每個月好幾萬的 Google 廣告費。」
這就是架構升級所帶來的巨大商業價值。在下一章，我們將深入探討 Next.js 如何在 Server 端直接與資料庫溝通，讓你徹底捨棄傳統肥胖的後端 API！