用途
本技能提供 Next.js App Router 开发的原则性指导，帮助开发者在构建 Next.js 应用时做出符合框架设计意图的技术决策，覆盖组件类型选择、数据获取、路由组织、缓存与性能等核心主题。
主要能力
1. Server 与 Client 组件
提供决策树：需要 useState、useEffect、事件处理器时使用 Client Component（'use client'）；需要直接数据获取且无交互时使用 Server Component（默认）；两者都需要时拆分为 Server 父组件 + Client 子组件。默认情况下，Server 用于数据获取、布局、静态内容；Client 用于表单、按钮、交互式 UI。
2. 数据获取模式
获取策略包括：默认（构建时缓存）、Revalidate（基于时间的 ISR 刷新）、No-store（每次请求动态获取）。数据流来源对应模式：数据库用 Server Component fetch，API 用带缓存的 fetch，用户输入用 Client state + server action。
3. 路由原则
文件约定：page.tsx（路由 UI）、layout.tsx（共享布局）、loading.tsx（加载状态）、error.tsx（错误边界）、not-found.tsx（404 页面）。路由组织方式：路由组 (name) 用于组织而不影响 URL，并行路由 @slot 用于同级多页面，拦截路由 (.) 用于模态覆盖。
4. API 路由
Route Handlers 按 HTTP 方法划分：GET 读取数据、POST 创建数据、PUT/PATCH 更新数据、DELETE 删除数据。最佳实践包括：用 Zod 验证输入、返回正确的状态码、优雅处理错误、尽可能使用 Edge runtime。
5. 性能原则
图片优化：使用 next/image 组件、首屏设置 priority、提供 blur 占位符、使用响应式尺寸。打包优化：对重型组件使用动态导入、基于路由的代码分割（自动）、用 bundle analyzer 分析。
6. 元数据
静态导出用于固定元数据，generateMetadata 用于按路由动态生成。关键标签：title（50-60 字符）、description（150-160 字符）、Open Graph 图片、Canonical URL。
7. 缓存策略
缓存层级：请求层由 fetch options 控制，数据层由 revalidate/tags 控制，整路由层由 route config 控制。重新验证方式：基于时间（revalidate: 60）、按需（revalidatePath/Tag）、不缓存（no-store）。
8. Server Actions
适用场景：表单提交、数据变更、触发重新验证。最佳实践：用 'use server' 标记、验证所有输入、返回类型化响应、处理错误。
9. 反模式
应避免：到处使用 'use client'、在 Client 组件中获取数据、跳过加载状态、忽略错误边界、产生大型客户端包。应改为：默认使用 Server、在 Server 中获取数据、使用 loading.tsx、使用 error.tsx、使用动态导入。
10. 项目结构
推荐结构：app/ 下包含 (marketing)/page.tsx 路由组、(dashboard)/layout.tsx 与 page.tsx、api/[resource]/route.ts、components/ui/。核心原则：Server Components 是默认选择，从 Server 开始，仅在需要时添加 Client。
使用方式
本技能以原则清单和决策表形式呈现，可在开发 Next.js App Router 项目时作为参考指南使用。具体安装命令与调用方式暂未提供。
适用场景
适用于使用 Next.js App Router 构建 Web 应用的开发场景，尤其是需要明确组件划分、数据获取策略、缓存与性能优化的项目。
限制
本技能为原则性指导，不包含具体代码示例或可执行脚本。具体版本兼容性、安装方式及运行环境要求暂未提供。