用途:帮助开发者按 Next.js 16 的正确模式构建应用,覆盖页面、布局、动态路由,以及从 Next.js 15 升级的场景,并兼顾有辨识度的界面设计。
主要能力:
- 关键破坏性变更提示。Next.js 16 中 params 与 searchParams 变为 Promise,服务端组件需 async 并 await params;客户端组件需用 React 的 use() 钩子解包。
- 核心模式:项目初始化、App Router 布局、动态路由、Server Actions、API Routes。
- 中间件变更:middleware.ts 在 Next.js 16 中由 proxy.ts 取代,示例中通过 proxy 函数做鉴权与重定向,并用 config.matcher 限定路径。
- 数据获取:服务端组件可直接 async/await 并配置 cache: "no-store" 或 next: { revalidate: 60 };客户端组件示例使用 SWR。
- 项目结构建议:app/ 下含 layout.tsx、page.tsx、globals.css、api/、tasks/、actions.ts、proxy.ts;components/ 与 lib/ 分目录。
- Next.js DevTools MCP:提供 init、nextjs_docs、browser_eval、nextjs_index、nextjs_call、upgrade_nextjs_16、enable_cache_components 等工具,用于运行时诊断、文档查询、浏览器测试与升级。Next.js 16+ 在 http://localhost:3000/_next/mcp 暴露内置 MCP 端点。
使用方式: 初始化项目:npx create-next-app@latest my-app --typescript --tailwind --eslint,随后 npx shadcn@latest init 并添加组件。 添加 MCP:claude mcp add next-devtools npx next-devtools-mcp@latest,或在 settings.json 中配置 stdio 类型、command 为 npx、args 为 next-devtools-mcp@latest。 验证:运行 python3 scripts/verify.py,预期输出 ✓ building-nextjs-apps skill ready;若失败检查 references/ 下是否有 nextjs-16-patterns.md。
适用场景:新建 Next.js 16 项目、编写页面与动态路由、迁移 Next.js 15 代码、排查构建与运行时错误、查询官方文档、启用缓存组件。
限制:资料未提供收费、价格、平台支持范围与效果保证等信息;具体 API 行为以官方文档为准。