SuperAPI AI 工具集

building-nextjs-apps

前端与建站

查看项目

更新于 10-15 20:06

技能介绍

用途:帮助开发者按 Next.js 16 的正确约定构建应用,避免常见破坏性变更,并在创建页面、布局、动态路由或从 Next.js 15 升级时提供指引。

主要能力:说明 Next.js 16 的关键变化——params 与 searchParams 现在是 Promise,服务端组件需 await,客户端组件需使用 React 的 use() 钩子;中间件文件由 middleware.ts 改为 proxy.ts;涵盖 App Router 布局、动态路由、Server Actions、API 路由、数据获取(服务端直接 async/await,客户端可用 SWR)等核心模式。

使用方式:可用 npx create-next-app@latest my-app --typescript --tailwind --eslint 初始化项目,并用 npx shadcn@latest init 及 add 命令添加 UI 组件。集成 Next.js DevTools MCP 可执行 claude mcp add next-devtools npx next-devtools-mcp@latest,用于运行时诊断、文档查询、浏览器自动化测试和自动升级等。Next.js 16+ 在 http://localhost:3000/_next/mcp 暴露内置 MCP 端点。验证命令为 python3 scripts/verify.py,预期输出 ✓ building-nextjs-apps skill ready。

适用场景:创建页面、布局与动态路由,从 Next.js 15 升级,处理表单与数据请求,以及为应用添加差异化设计。

限制:资料未说明收费、价格、平台支持范围或效果保证;部分内容依赖 next-devtools-mcp 及运行中的开发服务器。