Next.js App Router 專案的 AGENTS.md／CLAUDE.md 規則範本

讓 AI 寫 Next.js 時不再亂塞 'use client'、不再忘了 next/image。一份規則檔，Server Components 優先、檔案式路由、SEO metadata 全部講清楚。

[ Log in to see the full prompt ]

## 這是什麼／解決什麼痛點 如果你用 Claude Code、Codex 或 Cursor 開發 Next.js App Router 專案，最常見的災情是：AI 不分青紅皂白把每個元件都加上 `'use client'`（讓 Server Components 的好處全失效）、忘記用 `next/image`、不設 metadata 導致 SEO 一片空白、或是把資料寫入邏輯硬塞進頁面元件。根本原因是 AI 沒有一份「這個專案怎麼寫」的契約可以遵守。 這份範本把 App Router 的核心慣例固化成一份 `AGENTS.md`（或 Claude Code 的 `CLAUDE.md`），放進專案根目錄後，AI 每次開工都會先讀到它，自動遵守 Server Components 優先、檔案式路由、TypeScript strict、效能與 SEO 慣例。 ## 為什麼這來源值得用 來源是 GitHub 上的 `PatrickJS/awesome-cursorrules`，是社群維護量最大、最知名的 AI coding 規則集之一，採 CC0 公眾領域貢獻（等同放棄所有著作權、可任意商用改作）。它的 Next.js App Router 規則精準抓住了 App Router 與舊版 Pages Router 最大的觀念差異（Server 優先、特殊檔案約定），是把這套心智模型教給 AI 的好底稿。本篇在原規則之上補上了 TypeScript strict、secret 不外洩、build/tsc 驗證等實務護欄，並改寫成中文＋通用 AGENTS.md 格式。 ## 怎麼用 1. 把 `full_prompt` 的內容存成專案根目錄的 `AGENTS.md`（Codex／多數 agent 通吃）或 `CLAUDE.md`（Claude Code 專用，兩者內容可完全相同）。 2. 用 `{{NEXT_VERSION}}` 與 `{{STYLING}}` 兩個佔位符對齊你的實際版本與樣式方案（Tailwind／CSS Modules）。 3. 視專案調整「建議目錄結構」一段，讓它符合你既有的資料夾配置——規則檔要描述「現況」，不是逼專案改結構。 4. 之後請 AI 寫元件或頁面時，它會自動遵守；你也可以在對話中直接說「照 AGENTS.md 的規則做」。 ## 何時用 - 新開一個 Next.js App Router 專案、想一開始就把慣例釘死。 - 既有專案常被 AI 改出不一致的風格（client/server 亂用、少了 metadata）。 - 多人＋多種 AI 工具協作，需要一份共同契約。 不適用於還在用 Pages Router 的舊專案（特殊檔案約定不同），那種情況請改寫對應段落。 📎 來源：PatrickJS/awesome-cursorrules（作者 PatrickJS，CC0-1.0 公眾領域授權）— 本篇為繁中改寫整理，原始內容見上方連結。