用途：为 Next.js App Router 开发提供一套实践原则，帮助在服务端组件与客户端组件、数据获取、路由组织、缓存与性能之间做出取舍。
主要能力：
- 组件划分：默认使用服务端组件；需要 useState、useEffect 或事件处理时用客户端组件（'use client'）；两者都需要时拆分为服务端父组件加客户端子组件。
- 数据获取：默认静态缓存；revalidate 实现基于时间的 ISR；no-store 每次请求动态获取。数据库走服务端组件 fetch，API 用带缓存的 fetch，用户输入用客户端状态加 Server Action。
- 路由约定：page.tsx 路由 UI、layout.tsx 共享布局、loading.tsx 加载态、error.tsx 错误边界、not-found.tsx 404；路由组 (name) 组织目录不影响 URL，并行路由 @slot，拦截路由 (.) 用于模态覆盖。
- API 路由：Route Handler 支持 GET、POST、PUT/PATCH、DELETE；建议用 Zod 校验输入、返回正确状态码、优雅处理错误、尽量使用 Edge runtime。
- 性能：使用 next/image，首屏图片设 priority，提供 blur 占位与响应式尺寸；重组件用动态导入，路由级代码分割自动生效，可用 bundle analyzer 分析。
- 元数据：静态导出或 generateMetadata 动态生成；title 约 50-60 字符，description 约 150-160 字符，配置 Open Graph 图片与 canonical URL。
- 缓存：请求层用 fetch 选项，数据层用 revalidate/tags，整路由用 route config；支持基于时间 revalidate: 60、按需 revalidatePath/revalidateTag、no-store 不缓存。
- Server Actions：用于表单提交、数据变更、触发重新验证；需标记 'use server'，校验所有输入，返回带类型的响应并处理错误。
- 反模式：避免到处 'use client'、在客户端组件中获取数据、跳过加载态、忽略错误边界、产生过大的客户端包。
- 项目结构：app/ 下用 (marketing)、(dashboard) 等路由组，api/[resource]/route.ts 放接口，components/ui 放组件。
使用方式：作为开发时的参考原则，按上述决策树与约定组织代码。
适用场景：Next.js App Router 项目的架构设计、代码审查与重构。
限制：资料未提供具体安装命令、版本要求、收费信息或效果数据；仅应在任务明确匹配上述范围时使用，输出不能替代针对具体环境的验证、测试或专家评审；若缺少必要输入、权限、安全边界或成功标准，应停止并请求澄清。