Next.js App Router 模式

你在 App Router 里常卡在哪

从 Pages Router 迁到 App Router，或在新项目里直接用 app/ 目录，很容易在服务端组件（RSC）边界、数据缓存策略和并行/拦截路由上踩坑：客户端组件误包一层、fetch 默认缓存与 revalidate 行为搞不清、modal 拦截路由和 URL 状态对不上。本技能聚焦 Next.js 14+ 的 App Router 架构，而不是泛泛的 React 或旧版 Pages 路由。

技能如何组织回答

使用时会先明确目标、约束与所需输入，再按 App Router 相关最佳实践给出可执行步骤与验证方式（例如：组件该放在 server/client 哪一侧、路由段如何划分、Server Actions 与表单/突变如何衔接）。核心覆盖范围包括：

• 新建或迁移到 App Router 的目录与路由约定
• 服务端组件、流式渲染（loading.js / Suspense）与数据获取
• 并行路由（@slot）与拦截路由（(.) 等）的配置思路
• 缓存、revalidate 与 Server Actions 构建全栈能力

需要更完整的模式与示例时，会指向 resources/implementation-playbook.md 中的实现手册，而不是只给概念清单。

适用边界

任务与 Next.js App Router 无关（例如纯 Vite SPA、Pages Router 专属 API、或非 Next 栈）时，不应套用本技能。同样，若问题落在本范围外的其他框架或运维领域，应换用对应技能或文档。