用途：为 Next.js App Router 开发提供一份实践原则速查，帮助在服务端与客户端组件、数据获取与缓存、路由组织等方面做出决策。
主要能力与要点：
- 组件划分。默认使用 Server Component；需要 useState、useEffect 或事件处理时使用 'use client' 的 Client Component；两者都需要时拆分为 Server 父组件加 Client 子组件。
- 数据获取。默认静态缓存；使用 revalidate 实现 ISR；使用 no-store 实现动态获取。数据库经服务端组件获取，API 用 fetch 加缓存，用户输入用客户端状态配合服务端操作。
- 路由文件约定。page.tsx（路由 UI）、layout.tsx（共享布局）、loading.tsx（加载态）、error.tsx（错误边界）、not-found.tsx（404）。可用路由组（name）、并行路由（@slot）、拦截路由（(.)）组织与实现弹窗。
- API 路由。Route Handlers 对应 GET/POST/PUT/PATCH/DELETE；建议用 Zod 校验输入、返回正确状态码、优雅处理错误，并在可行时使用 Edge runtime。
- 性能。使用 next/image，首屏设置 priority，提供模糊占位与响应式尺寸；对重组件动态导入，利用自动的按路由代码分割，并用打包分析工具检查。
- 元数据。静态导出用于固定元数据，generateMetadata 用于按路由动态生成；关注 title（50-60 字符）、description（150-160 字符）、Open Graph 图片与 canonical URL。
- 缓存。控制层包括请求（fetch 选项）、数据（revalidate/tags）与整条路由配置；可用基于时间的 revalidate: 60、按需 revalidatePath/revalidateTag 或不缓存 no-store。
- Server Actions。适用于表单提交、数据变更与触发重新验证；需用 'use server' 标记、校验全部输入、返回带类型响应并处理错误。
- 反模式。避免到处 'use client'、在客户端组件中获取数据、跳过加载态、忽略错误边界、产生过大客户端包。
- 项目结构示例：app 目录下含路由组、布局、api/[resource]/route.ts 及 components/ui。
限制与未提供信息：资料未说明该技能的安装方式、命令、依赖版本、定价或平台支持情况。