用途:该技能汇总 Next.js 16 App Router 的性能优化规则,供 AI 智能体在编写新代码、配置缓存、实现服务端组件与数据获取、设置平行与拦截路由、创建 Server Actions 等场景中参考,指导自动化重构与代码生成。资料称由 Next.js 社区维护,包含 8 个类别共 40 条规则,按影响程度排序。
主要能力(按优先级):1. 构建与打包优化(CRITICAL,build- 前缀),如 optimizePackageImports、动态导入、避免桶文件导入、Turbopack 文件系统缓存、服务端外部包;2. 缓存策略(CRITICAL,cache-),如 'use cache' 指令、revalidateTag 与 cacheLife、fetch 缓存选项、revalidatePath、React cache() 请求去重、路由段缓存配置;3. 服务端组件与数据获取(HIGH,server-),如并行获取、流式加载、数据同址、预加载、避免首屏客户端获取、错误处理;4. 路由与导航(HIGH,route-),如平行路由、拦截路由、预取配置、proxy.ts、notFound();5. Server Actions 与变更(MEDIUM-HIGH,action-),如表单提交、useFormStatus 待定状态、错误处理、乐观更新、变更后重新验证;6. 流式与加载状态(MEDIUM,stream-),如 Suspense 边界、loading.tsx、error.tsx、骨架屏尺寸、嵌套 Suspense;7. 元数据与 SEO(MEDIUM,meta-),如 generateMetadata、动态站点地图、robots、动态 OpenGraph 图片;8. 客户端组件(LOW-MEDIUM,client-),如缩小 'use client' 边界、children 模式、避免水合不匹配、第三方脚本加载。
使用方式:阅读各单独参考文件获取详细说明与代码示例,其中包含章节定义、规则模板,以及 build-dynamic-imports、cache-use-cache-directive 等示例规则文件;完整展开版见 AGENTS.md。相关技能:React 19 基础见 react-19,数据获取模式见 tanstack-query,客户端表单见 react-hook-form。
限制:资料未提供安装命令、具体代码示例内容、版本兼容范围与收费信息。