NextJS
一站式 Next.js App Router 开发助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：NextJS。 它的用途是：一站式 Next.js App Router 开发助手 完整的 Skill 内容见：https://321skill.com/skills/nextjs-x/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我用 Next.js App Router 创建一个带服务端组件和 Server Actions 的博客列表页面，要求数据从 MongoDB 获取，并实现点赞功能。”它会先生成布局文件和服务端组件代码，然后编写 Server Action 处理点赞逻辑，最后给出部署到 Vercel 的配置建议。
介绍
该技能专为使用 Next.js App Router 构建现代 Web 应用而设计，覆盖服务端组件、缓存策略、Server Actions、用户认证、部署上线等全链路开发场景。无论你是遇到路由配置、数据获取、缓存失效还是构建报错，都可以通过自然语言描述需求，获得代码示例、架构建议或问题排查方案。 使用时，你可以直接描述任务，例如“为博客页面添加服务端组件的数据获取逻辑，并启用增量静态再生成（ISR）”，技能会生成对应的 Next.js 代码片段，并解释关键配置项。对于 Server Actions 的权限校验、认证中间件集成、环境变量管理等问题，也都能提供针对性解答。 适合在 Next.js 项目开发中遇到任何技术障碍的开发者，无论是前端工程师、后端工程师还是全栈开发者。尤其推荐给正在从 Pages Router 迁移到 App Router、或需要快速原型验证的团队。 注意：该技能主要针对 App Router 模式，对于 Pages Router 的旧项目支持有限。同时，它不提供 UI 组件库或设计系统，更专注于业务逻辑与架构层面。建议在已安装 Node.js 18+ 和 Next.js 14+ 的环境中使用。
核心特点
与通用 React 技能不同，该技能深入 Next.js App Router 特有机制（如服务端组件、布局嵌套、缓存规则），并内置了 Server Actions 的认证与部署最佳实践，能直接处理路由冲突、缓存失效等场景化问题。
注意事项
不适用于非 Next.js 项目，且对 Pages Router 的旧版 API 支持有限，无法处理纯前端 UI 设计或动画效果。
常见问题
这个技能支持 Next.js 的 Pages Router 吗？
主要针对 App Router，Pages Router 仅提供基础支持，建议迁移到 App Router 以获得最佳体验。
需要先安装 Next.js 吗？
是的，需要本地已有 Next.js 项目（推荐 14+ 版本），技能会基于你的项目结构生成适配代码。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/nextjs-x/raw/index.md 读取 NextJS 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/nextjs-x/raw/index.md（查看排版版本）