“帮我审审 Next.js 代码”会漏掉 App Router 特有陷阱：一个 useState 污染了服务端组件、cache: “no-store” 意外失效、Server Action 没 revalidate。下面 15 个 Prompt 各打一个 App Router 特有失败模式。
适合哪些场景
正在发 App Router（Next 13.4+）应用的工程师、审 Server Action PR 的 reviewer、从 Pages Router 迁移的独立开发者、排 hydration / 缓存意外的团队。
什么时候不建议这样写 Prompt
Pages Router 代码别用（模型不同）。纯静态营销站也别用，根本用不到 App Router 服务端特性。
Prompt 结构公式
每个 App Router 审查 Prompt 都要带这六个要素：
- 角色：让 AI 扮演谁（架构师 / SRE / QA Lead / Release Captain）。
- 上下文：仓库 / 框架 / 运行时版本 / 涉及哪些文件或 diff。
- 目标：一个具体可交付物——review 笔记、计划、checklist、测试文件、交接文档。
- 限制：AI 不能做什么（别重写、别自动 format、别瞎猜版本号）。
- 输出格式：编号清单、markdown 表格、JSON、unified diff、可直接运行的代码。
- 示例 / 信号：1-2 条”好输出”示例，或者说明什么是糟糕输出。
这套 Prompt 适合用在哪
- App Router 迁移 PR review
- 上线前缓存与 revalidate 审计
- Server Action 安全审查
- Hydration / 边界排错
- Next.js 升级后的性能回归排查
15 个可直接复制的 Prompt 模板
1. server vs client 边界审计
第一个跑——边界 bug 会级联。
You are a senior Next.js reviewer. Audit this App Router code for SERVER vs CLIENT boundary violations: (1) files with `"use client"` that should be server (no interactivity), (2) server files importing client-only APIs (window, useState), (3) client components receiving non-serializable props, (4) deep client trees that could be shifted to server. For each: file:line, why it's wrong, the fix. Do not refactor.2. Server Action 正确性 review
Review every `"use server"` action in this code for: (1) input validation (zod / valibot / manual), (2) auth check at the top of the action, (3) `revalidatePath` or `revalidateTag` after mutation, (4) error handling that returns typed result (not throw), (5) idempotency for retries. Output: action name | finding | severity.3. route handler review
Review `route.ts` handlers in `app/api/`: (1) Method handlers (GET/POST/etc) — any missing? (2) Response shape consistency, (3) `dynamic = "force-dynamic"` vs default — is the choice intentional? (4) Auth middleware coverage, (5) CORS for cross-origin. List findings with file:line.4. fetch 缓存审计
Audit every `fetch()` call in server components and route handlers. For each: (1) cache mode (default / no-store / force-cache / revalidate=N), (2) is the choice appropriate for the data freshness needs? (3) any duplicate fetches per request that should be deduped, (4) any user-specific data accidentally cached publicly. File:line evidence required.5. revalidatePath / revalidateTag 覆盖
Map every mutation (server action, POST route handler, webhook). For each: (1) Does it call revalidatePath or revalidateTag? (2) Does the tag/path match the data being invalidated? (3) Are there reads that won't see the mutation because they aren't tagged? List gaps as: mutation | should invalidate | currently invalidates.6. streaming 与 Suspense 审计
Review use of Suspense boundaries and streaming in this App Router code. Identify: (1) slow data fetches not wrapped in Suspense, (2) loading.tsx files missing where they'd help LCP, (3) waterfalls of awaited fetches that should be parallelized, (4) Suspense boundaries placed too high (whole-page loading) or too low (jittery). Suggest specific Suspense placements.7. metadata 与 SEO review
Audit Next.js metadata (`generateMetadata` + static metadata): (1) every route has a title and description? (2) Open Graph and Twitter card present for shareable routes? (3) `alternates.canonical` set for routes reachable at multiple URLs? (4) Dynamic metadata using the same data as the page (no duplicate fetch)? File:line.8. <Image> 与资源优化 review
Review `<Image>` usage in this code: (1) `width` and `height` explicit (no layout shift)? (2) `priority` set on above-fold images? (3) `sizes` attribute correct for responsive use? (4) `remotePatterns` in next.config covers all sources? (5) Any `<img>` tags that should be `<Image>`? Output: image | issue.9. middleware review
Review `middleware.ts`: (1) matcher config covers the intended routes only (no overmatching)? (2) Auth checks early-return correctly? (3) Header / cookie mutations applied via `NextResponse.next({headers})` rather than mutating request? (4) Any heavy work that should be in a route handler? File:line findings.10. cookies 与 session review
Audit cookie usage across server components, server actions, and route handlers: (1) any reads via `cookies()` in places that force dynamic when static would work? (2) httpOnly / secure / sameSite flags correct? (3) Session reads duplicated per request (should be cached with `cache()`)? (4) Cookies set in server components (illegal — should be in actions / routes)?11. error / not-found 边界 review
Review `error.tsx`, `global-error.tsx`, `not-found.tsx`: (1) Every route segment with possible errors has one? (2) Error boundaries log to observability? (3) `reset()` functions are wired up? (4) `notFound()` called from data-fetch paths that 404? List missing files and missing handlers.12. 并行 / 拦截路由 review
If this app uses parallel routes (`@slot`) or intercepting routes (`(.)folder`), audit: (1) Default slots present where required? (2) Slot loading / error files in place? (3) Intercepting routes degrade correctly when accessed directly via URL? If no parallel/intercepting routes exist, say so — do not invent.13. dynamic / static 渲染审计
For each route segment, determine rendering mode (static / dynamic / ISR). Output a table: route | mode | trigger (cookies()/headers()/searchParams/fetch no-store) | intentional? Flag routes that became dynamic unintentionally — those are usually perf regressions.14. App Router 升级兼容 review
升级 Next.js minor/major 后用。
I just upgraded Next.js from {fromVersion} to {toVersion}. Review this code for breakage / new-best-practice opportunities specific to that upgrade: deprecated APIs in use, new caching defaults, new metadata or Image features, changed TypeScript types. Output: file | change | severity (breaking / warning / nice-to-have).可替换变量： fromVersion, toVersion —— 例如 14.0, 15.1
15. App Router 发现 → 修复 PR 计划
最后跑——把发现转成 PR 序列。
Take the findings from previous App Router reviews and group them into 3-5 PRs sized for solo review (each < 400 LOC diff). For each PR: title, files touched, dependency on other PRs, rollback plan. Output as markdown.容易踩的坑
- 当 Pages Router 审——缓存、数据获取、组件模型都不同。
- 改完没
revalidatePath/revalidateTag——生产读到旧数据。 - 全部
"use client"——服务端组件的好处全没了。 - 看到
dynamic = "force-dynamic"就放过——多半藏着缓存配错。 - 不查 middleware matcher——overmatch 会拖垮 edge 性能。
- Server Action 顶部不检查 auth——它是公开可调用的。
- 忽略
cookies()/headers()把本该静态的页面强制 dynamic 化。
优化技巧
- 永远先跑 server/client 边界（模板 1），其他发现都源自这里。
- 每条发现都要
file:line证据和触发这个问题的具体 import。 - 缓存审计按路由跑，别全局跑——不同路由缓存预期不同。
- Server Action 必须显式 review auth、validation、revalidation。
- 每次 Next.js 升级跑升级兼容 Prompt——能抓默认值变化（缓存、fetch）。
- 把发现做成 checklist，每个修复 PR 后重跑——缓存 bug 爱回来。
- 人工 review 配合
next build && next start实测——Prompt 抓不到真实 LCP 回归。
FAQ
- 能审 Pages Router 吗？: 不能——模型不同。Pages Router 用通用 React 审查 Prompt。
- Server Action 调了很多 helper 怎么 review？: 粘 Server Action 文件 + 它直接调的 helper。别粘整个仓库——聚焦比覆盖重要。
- AI 知道最新 Next.js 版本吗？: 在 prompt 里写明版本。AI knowledge cutoff 各不同，太新的版本把相关 changelog 也贴一段。
- 不跑应用能审 streaming 行为吗？: 静态审能抓结构（Suspense 边界、await 顺序）。真实 streaming 行为需要 profiling——Prompt 只抓代码形态。
- 15 个能一次跑完吗？: 能但发现会糊。先跑边界，再跑缓存，最后其他。
- Edge runtime 呢？: 在 prompt 里加：“Some routes run on Edge — flag Node-only APIs used in Edge-runtime files.”