SuperAPI AI 工具集

nextjs-development

编程与开发

查看项目

更新于 10-16 03:47

技能介绍

用途:为编码智能体提供 Next.js(最新 16.2.4)App Router 优先的参考与工作流,适用于创建或修改页面、布局、路由、数据获取与缓存、Server Actions 及性能优化等任务。

主要能力:覆盖项目结构与文件约定(page.tsx、layout.tsx、loading.tsx、error.tsx、not-found.tsx、forbidden.tsx、unauthorized.tsx、route.ts、proxy.ts、middleware.ts、instrumentation.ts);动态路由、路由组、并行路由与拦截路由;Server/Client Components 判定与组合;use cache 指令及 cacheLife、cacheTag、revalidateTag、revalidatePath;异步请求 API(await cookies()、await headers()、await params、await searchParams);after() 与 connection();Server Actions 与 next/form、useOptimistic;Turbopack 开发、next/image、next/font;Next.js MCP 开发工具与升级 codemod。

使用方式:跨 GitHub Copilot、Claude Code、Codex 使用;Codex 需同步到 $CODEX_HOME/skills/nextjs-development 并重启。创建项目命令:npx create-next-app@latest my-app --typescript --tailwind --eslint --app。无 MCP 时使用 next dev、next build、next lint、浏览器控制台与本地日志验证,并声明未使用 MCP。

适用场景:App Router 路由与渲染模式设计、缓存与再验证、表单与 Server Actions、性能与图片字体优化、组件审查。

限制:需 Next.js 16+ 才能使用 next-devtools-mcp;MCP 不可用时须走本地回退;不得在宿主未暴露 MCP 时声称已使用;避免混用服务端与客户端职责、使用旧同步请求 API、跳过路由级 loading 与 error 状态。验证需覆盖 loading、empty、error、success 与响应式断点,并在窄屏、纯键盘与慢加载场景下压测。