使用 AI 快速实现 Next.js App Router 最佳架构实践

解决 Next.js 版本升级后的架构迷茫：通过预设的模式指南，让 AI 帮你在 Next.js 14+ 中正确实现服务端组件（RSC）、并行路由、拦截路由及高效的数据缓存方案。

为什么需要这个技能

Next.js 从 Pages Router 迁移到 App Router 后，开发范式发生了根本性变化。很多开发者在处理服务端组件（Server Components）与客户端组件（Client Components）的边界、数据流传递以及缓存失效（Revalidation）时经常感到困惑。

如果直接让 AI 写代码，它可能会混用旧版 API 或生成性能低下的结构。本技能为 AI 提供了标准化的 App Router 模式库，确保生成的代码符合 Next.js 官方推荐的现代全栈开发实践。

新项目搭建：从零开始构建基于 Next.js 14+ App Router 的应用。
架构迁移：将旧的 Pages Router 项目逐步迁移至 App Router。
复杂路由实现：需要实现并行路由（Parallel Routes）或拦截路由（Intercepting Routes）以构建复杂的 UI 模态框或仪表盘。
性能优化：利用流式传输（Streaming）和精细化缓存策略优化页面加载速度。
全栈功能开发：使用 Server Actions 替代传统的 API Route 实现数据提交。

需求界定：明确当前组件是需要服务端渲染（默认）还是需要交互能力（'use client'）。
模式匹配：根据功能需求（如：数据获取、状态同步、路由跳转），从 resources/implementation-playbook.md 中匹配对应的最佳实践模式。
方案实施：
- 配置布局文件 layout.tsx 与页面文件 page.tsx。
- 实现数据获取逻辑并设置 revalidate 缓存时间。
- 定义 Server Actions 处理服务端逻辑。
验证与调优：检查客户端/服务端组件的层级关系，确保最小化客户端 JS 传输量。

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

暂无推荐