SuperAPI AI 工具集

nextjs

前端与建站

查看项目

更新于 10-16 01:07

技能介绍

用途:该技能是面向 Next.js 16 App Router 应用的性能优化指南,在编写 Next.js 16 代码、配置缓存策略、实现服务端组件与数据获取、设置路由、创建 Server Actions 等场景下参考使用,用于指导自动化重构和代码生成。

主要能力:包含 40 条规则,按影响优先级分为 8 类。构建与打包优化(CRITICAL,前缀 build-):optimizePackageImports、动态导入、避免 barrel 文件、Turbopack 文件系统缓存、服务端外部包配置。缓存策略(CRITICAL,前缀 cache-):'use cache' 指令、revalidateTag 配合 cacheLife、fetch 缓存选项、revalidatePath、React cache() 请求去重、路由段缓存导出配置。服务端组件与数据获取(HIGH,前缀 server-):并行获取、流式加载、数据同置、预加载模式、避免初始数据客户端获取、错误处理。路由与导航(HIGH,前缀 route-):并行路由、拦截路由(模态)、Link 预取、proxy.ts 网络边界、notFound()。Server Actions 与变更(MEDIUM-HIGH,前缀 action-):表单提交、useFormStatus 待定状态、错误处理、乐观更新、变更后重新验证。流式与加载状态(MEDIUM,前缀 stream-):Suspense 边界、loading.tsx、error.tsx、骨架屏尺寸匹配、嵌套 Suspense。元数据与 SEO(MEDIUM,前缀 meta-):generateMetadata、动态站点地图、robots、动态 OpenGraph 图片。客户端组件(LOW-MEDIUM,前缀 client-):缩小 'use client' 边界、children 模式、避免水合不匹配、第三方脚本加载。

使用方式:阅读各参考文件获取详细说明与代码示例,包括分类定义、规则模板及示例规则文件(如 build-dynamic-imports、cache-use-cache-directive)。完整指南见 AGENTS.md。相关技能:React 19 基础见 react-19,数据获取见 tanstack-query,客户端表单见 react-hook-form。

限制:资料未提供安装命令、收费信息及具体平台要求。