Next.js App Router Patterns
新教 Agent 按 App Router 惯例拆分 Server/Client 组件、组织路由与数据获取，避免把 Pages Router 习惯套到新项目。
Next.js App Router Patterns是开发方向的 Agent 技能。教 Agent 按 App Router 惯例拆分 Server/Client 组件、组织路由与数据获取，避免把 Pages Router 习惯套到新项目。相关标签：Next.js · App Router · React · 路由。
Next.js App Router Patterns是什么
Next.js App Router Patterns把开发相关工作流打包给 Agent 复用。教 Agent 按 App Router 惯例拆分 Server/Client 组件、组织路由与数据获取，避免把 Pages Router 习惯套到新项目。
如何在 Cursor / Claude / Codex 中安装 Next.js App Router Patterns
Claude Code 按本页命令安装，或将技能放到 ~/.claude/skills 或项目 .claude/skills，Claude 会识别 Next.js App Router Patterns。
Cursor 用本页安装命令写入技能目录后，在 Cursor Agent 中按技能名调用 Next.js App Router Patterns。
Codex 安装到 Codex 技能目录后按名称调用。若本页只有通用命令，先在本机执行，再确认 Codex 能读到该技能。
本页没有收录安装命令。请到项目主页查看 Next.js App Router Patterns 的安装方式。
请访问 项目主页 查看安装与使用说明。
如何使用
Claude Code： 将技能放入 ~/.claude/skills（个人）或项目 .claude/skills 目录，Claude 会自动识别。
Cursor / Windsurf： 通过 npx skillsadd 安装后，技能目录会被放入配置路径。
Codex CLI： 安装后在技能目录中自动加载，通过名称调用。
标签
同类推荐
Web Artifacts Builder
Anthropic 官方技能，将自然语言描述转化为完整的可交互 Web 应用，生成 HTML、CSS、JavaScript 单文件制品，适合快速原型与演示。
Systematic Debugging
系统化调试方法论技能，引导 Agent 按复现、定位、假设、验证、修复的闭环流程排查 Bug，避免盲目改代码。
Test-Driven Development
测试驱动开发（TDD）工作流技能，遵循红-绿-重构循环，先写失败测试再实现功能，保障代码质量与可维护性。
Code Review Workflow
结构化代码审查工作流，从命名、架构、安全、性能、可读性等维度逐项检查，并输出规范的评审意见与改进建议。
MCP Builder
Model Context Protocol 服务器构建技能，指导 Agent 快速搭建符合 MCP 规范的服务器，定义工具、资源与提示词。
Skill Creator
技能创建器，帮助开发者按规范编写 SKILL.md 元文件、组织参考脚本与资源，快速发布可被 Agent 加载的技能包。
常见问题
Next.js App Router Patterns做什么用？
Next.js App Router Patterns属于开发技能。教 Agent 按 App Router 惯例拆分 Server/Client 组件、组织路由与数据获取，避免把 Pages Router 习惯套到新项目。
Claude、Cursor、Codex 都能用 Next.js App Router Patterns 吗？
只要客户端支持 Agent Skills 格式并加载了该技能目录，就可以调用 Next.js App Router Patterns。以项目主页的兼容说明为准。
还有哪些同类技能？
相关推荐来自同一开发分类，便于挑选更贴近你工作流的技能。