用途
该技能面向使用 Next.js 16 构建 React 应用的场景,提供版本迁移与核心框架 API 的使用指导。适用情形包括:采用服务端优先架构构建新应用;需要 Server Components 以获得性能与 SEO 优势;实现流式与渐进式渲染;从 Next.js 14/15 迁移到 16;使用 proxy.ts 处理路由保护;利用 Turbopack 加快开发构建。
主要能力
- 版本迁移:记录 v15→v16 的关键破坏性变更,包括 proxy.ts 取代 middleware.ts(完整 Node.js 运行时,而非 Edge)、Turbopack 默认启用、cacheComponents 取代已移除的实验性 ppr 标志、强制 React 19、params/searchParams 转为异步需 await。
- 新特性说明:涵盖 16.1–16.3 的增量更新,例如 Turbopack 文件系统缓存默认开启、next dev --inspect、<Link> 的 transitionTypes 属性、next start --inspect、Adapters API 稳定、catchError 与 retry() 错误恢复、next/root-params、import.meta.glob、构建缓存默认开启等。
- 架构约定:给出基于 SOLID 的模块化结构建议(页面作为薄入口,从 feature 模块导入),以及 page.tsx、layout.tsx、loading.tsx、error.tsx、not-found.tsx 等文件约定。
- 核心概念:Server Components 默认化与 'use client' 的使用时机;use cache、cacheTag()、cacheLife()、revalidateTag() 构成的显式缓存策略;Server Components 直接取数,无需 getServerSideProps/getStaticProps。
- 参考文档索引:按安装与项目结构、v15→v16 升级与 middleware 迁移、路由、缓存、Server Components、React 19 特性、proxy 与安全、元数据与 SEO、表单与 Actions、部署与环境等主题提供对应文档指引。
- 最佳实践与性能:Server Components 优先、就近取数、Suspense 流式渲染、用 proxy.ts 替代 middleware、显式缓存、并行路由;以及 Turbopack 增量编译、React Compiler 自动记忆化、tree shaking、代码分割、流式渲染、按需水合、图片与字体优化。
使用方式
资料中给出了强制性的智能体工作流:在任何实现之前并行启动 3 个 Agent,分别用于分析现有路由/组件/模式、通过 Context7/Exa 核对最新 Next.js 16 文档、查询 v15→v16 破坏性变更;实现完成后运行验证步骤。该技能以 Claude 插件(fusengine/claude-plugins)形式分发,安装命令资料中暂未提供。
适用场景与限制
适用于 Next.js 16 应用开发与版本升级,尤其是需要处理 proxy.ts、Turbopack、cacheComponents、React 19 等迁移要点的项目。限制:该技能仅覆盖核心框架 API;若需组装完整生产栈(如 Prisma、Better Auth、shadcn/ui、Zustand 组合)应改用 nextjs-stack;若是无 next.config.* 的纯 React SPA 应改用 react-expert 相关技能。定价、平台要求及具体安装方式暂未提供。