Next.js App Router 技能面向使用 Next.js 13+ 构建现代高性能 Web 应用的场景，强调服务端组件与高级路由能力。
用途：帮助开发者掌握 App Router 的文件系统路由、布局、加载状态与流式渲染，并用于构建可扩展、SEO 友好的 Next.js 应用。资料列出适用场景包括：构建 Next.js 13+ 应用；实现带布局的复杂路由；有效使用服务端与客户端组件；创建加载与错误边界；通过流式渲染优化性能；构建 SEO 友好应用；实现动态与静态路由；使用并行与拦截路由；构建可扩展应用；实现高级路由模式；创建类型安全的 API 路由；优化社交分享所需元数据。
主要能力与结构：
- App 目录结构：使用 app 目录下 layout.tsx、page.tsx、loading.tsx、error.tsx、not-found.tsx、template.tsx 等特殊文件，配合嵌套目录实现路由。
- 布局：根布局为必需文件，可包含字体与全局元数据；嵌套布局用于局部区域；template.tsx 在每次导航时重新渲染以重置状态。
- 动态路由：通过 [slug] 目录捕获动态段，可配合 generateStaticParams 在构建时生成静态路径，generateMetadata 动态生成元数据；支持多个动态段、catch-all（[...slug]）与可选 catch-all（[[...slug]]）。
- 加载 UI 与流式渲染：通过 loading.tsx 与 React Suspense 为独立 UI 区块提供骨架与流式加载。
- 错误处理：error.tsx 与 global-error.tsx 作为客户端组件实现错误边界并提供 reset；not-found.tsx 自定义 404，可用 notFound() 程序化触发。
- 路由组：以 (name) 目录组织代码而不影响 URL，可为不同分组设置独立布局。
- 并行路由：使用 @slot 目录在同一布局中同时渲染多个页面，并支持按条件渲染。
- 拦截路由：使用 (.)、(..)、(..)(..)、(...) 等模式从特定路径拦截路由，用于模态框或悬浮层展示。
- Metadata API：通过静态 metadata 对象与 generateMetadata 提供标题模板、描述、关键词、作者、Open Graph、Twitter 卡片、robots 以及 JSON-LD 结构化数据。
- Route Handlers：在 app/api 下通过 route.ts 导出 GET、POST 等函数处理请求，使用 NextRequest 与 NextResponse 返回 JSON 或状态码。
- Middleware：在根级 middleware.ts 中实现认证检查、重定向、添加响应头、A/B 测试与重写，并通过 config.matcher 指定应用路径。
最佳实践（资料列出）：默认使用服务端组件，仅在需要交互或浏览器 API 时标记 'use client'；实现适当的加载状态；创建细粒度错误边界；利用 generateStaticParams 预渲染；用路由组组织代码；优化元数据；策略性使用 Suspense 流式渲染；尽量减小客户端 JavaScript；合理使用中间件；测试路由行为。
常见陷阱（资料列出）：不必要地使用客户端组件；未实现加载状态；遗漏错误边界相关处理。
限制：资料未提供安装命令、收费、价格、平台限制或具体运行环境要求，暂未提供。