nextjs

用途

本技能是一份面向 Next.js 16 App Router 应用的性能优化指南，由 Next.js Community 维护。它包含 42 条规则，分布在 8 个类别中，按影响程度排序，用于指导自动化重构和代码生成。其中两条规则覆盖 Next.js 16.3 预览特性（Instant Navigations、Partial Prefetching），需通过 cacheComponents 和 partialPrefetching 开启。

适用时机

在以下场景中可参考这些指南：

编写新的 Next.js 16 App Router 代码
使用 'use cache' 指令配置缓存策略
实现服务端组件与数据获取
设置并行路由与拦截路由
创建用于表单处理和变更的服务端操作

规则类别（按优先级）

优先级	类别	影响	前缀
1	构建与打包优化	CRITICAL	build-
2	缓存策略	CRITICAL	cache-
3	服务端组件与数据获取	HIGH	server-
4	路由与导航	HIGH	route-
5	服务端操作与变更	MEDIUM-HIGH	action-
6	流式与加载状态	MEDIUM	stream-
7	元数据与 SEO	MEDIUM	meta-
8	客户端组件	LOW-MEDIUM	client-

快速参考

1. 构建与打包优化（CRITICAL）

build-optimize-package-imports - 为图标库配置 optimizePackageImports
build-dynamic-imports - 对重型组件使用动态导入
build-barrel-files - 在 App Router 中避免桶文件导入
build-turbopack-config - 在顶层配置 Turbopack
build-external-packages - 为 Node 依赖配置服务端外部包

2. 缓存策略（CRITICAL）

cache-use-cache-directive - 结合缓存组件使用 'use cache'
cache-revalidate-tag - 配合 cacheLife 配置使用 revalidateTag
cache-fetch-options - 显式配置 Fetch 缓存选项
cache-revalidate-path - 使用 revalidatePath 进行路由级缓存失效
cache-react-cache - 使用 React cache() 进行请求去重
cache-segment-config - 使路由配置与当前缓存模型匹配

3. 服务端组件与数据获取（HIGH）

server-parallel-fetching - 在服务端组件中并行获取数据
server-component-streaming - 流式传输服务端组件以实现渐进式加载
server-data-colocation - 将数据获取与组件就近放置
server-preload-pattern - 对关键数据使用预加载模式
server-avoid-client-fetching - 初始数据避免客户端获取
server-error-handling - 优雅处理服务端组件错误

4. 路由与导航（HIGH）

route-parallel-routes - 对独立内容使用并行路由
route-intercepting-routes - 对模态框模式使用拦截路由
route-prefetching - 适当配置 Link 预取
route-instant-navigations - 通过 Stream、Cache 或 Block 实现即时导航（16.3 预览）
route-partial-prefetching - 对可复用路由外壳使用部分预取（16.3 预览）
route-proxy-ts - 使用 proxy.ts 处理网络边界逻辑
route-not-found - 对缺失资源使用 notFound()

5. 服务端操作与变更（MEDIUM-HIGH）

action-server-action-forms - 使用服务端操作处理表单提交
action-pending-states - 使用 useFormStatus 显示待处理状态
action-error-handling - 优雅处理服务端操作错误
action-optimistic-updates - 使用乐观更新实现即时反馈
action-revalidation - 变更后重新验证缓存

6. 流式与加载状态（MEDIUM）

stream-suspense-boundaries - 策略性地放置 Suspense 边界
stream-loading-tsx - 使用 loading.tsx 实现路由级加载状态
stream-error-tsx - 使用 error.tsx 实现路由级错误边界
stream-skeleton-matching - 使骨架屏尺寸与实际内容匹配
stream-nested-suspense - 嵌套 Suspense 以实现渐进式展示

7. 元数据与 SEO（MEDIUM）

meta-generate-metadata - 使用 generateMetadata 生成动态元数据
meta-sitemap - 动态生成站点地图
meta-robots - 配置 Robots 以控制爬取
meta-opengraph-images - 生成动态 OpenGraph 图片

8. 客户端组件（LOW-MEDIUM）

client-use-client-boundary - 最小化 'use client' 边界范围
client-children-pattern - 将服务端组件作为子组件传给客户端组件
client-hydration-mismatch - 避免水合不匹配
client-third-party-scripts - 高效加载第三方脚本

使用方式

先在项目根目录运行：

npx -y @pymodel/react-frontend-skills detect               # installed vs. targeted versions
npx -y @pymodel/react-frontend-skills scan --skill nextjs  # deprecated APIs → rule IDs

针对上述每条与任务匹配的规则以及每个扫描命中项，阅读 references/<rule-id>.md：其中说明为何重要，以及错误代码与正确代码的对比。

技能介绍

用途