用途
本技能用于在 Next.js 16 的 App Router 下构建 React 19.2 应用，覆盖生产环境常见模式与实践，包括路由结构、数据获取、表单变更、缓存策略、SEO 元数据以及性能优化。适用于采用 Next.js 16 App Router、React 19.2、Node.js 20.9+ 与 TypeScript 5.9+ 的项目。
主要能力
- App Router 模式：布局、loading、错误边界、路由，以及并行路由（Next.js 16 中 default.js 变为必需）。
- Server Components：作为 App Router 默认组件，可在服务端获取数据、访问数据库、保留敏感逻辑；配合 Suspense 实现流式渲染。同时给出 Server 与 Client 组件的分工与“use client”用法。
- Server Actions：以 'use server' 定义的异步函数，可被客户端或服务端组件调用，用于表单处理、数据变更与 revalidatePath。资料列出的模式包括 useFormState + useFormStatus 的客户端表单加载、返回 { error } 或 { success } 的错误处理、useOptimistic 乐观更新、FormData 文件上传、redirect() 跳转。
- 缓存组件与缓存 API（Next.js 16 新增）：'use cache' 指令用于组件/函数的显式缓存；revalidateTag()（两个参数：tag + cacheLife）、updateTag()、refresh()、revalidatePath()；以及 PPR（Partial Prerendering）的配置与 Suspense 边界用法。
- Route Handlers：以 app/api/.../route.ts 定义 GET/POST 等端点，支持动态路由（Next.js 16 中 params 为 Promise，需 await）、搜索参数、webhooks 与流式响应。
- Next.js 16 破坏性变更迁移：异步 params、异步 cookies()/headers()、middleware.ts 重命名为 proxy.ts 并同步重命名函数、并行路由要求 default.js、缓存由自动改为 “use cache” 显式启用、Node.js 20.9+ 与 React 19.2+ 要求。资料给出 codemod 命令：bunx @next/codemod@canary upgrade latest。
- React 19.2 特性：React Compiler（experimental.reactCompiler）、View Transitions（useTransition + router.push）、useEffectEvent。
- Metadata API：静态 metadata 导出与基于异步 params 的 generateMetadata，用于 SEO、Open Graph、Twitter Cards、sitemaps。
- 图片与字体优化：next/image（含 priority、远程图片需在 next.config.ts 配置 images.remotePatterns）、next/font（如 Inter 的 subsets 与 variable）。
- 性能模式：dynamic 懒加载、按路由自动代码分割、Turbopack（Next.js 16 默认，可用 --webpack 退出）、PPR。
- 错误排查：列出 5 个关键错误及修复方式（params 为 Promise、middleware.ts 弃用、并行路由缺 default.js、Server Component 使用 React hooks、fetch 不再自动缓存），并指向完整 18 个错误的 error-catalog.md。
使用方式
资料将该技能组织为参考文档与模板文件，按需加载：
- references/next-16-migration-guide.md：从 Next.js 15 迁移、异步 params 错误、proxy.ts 设置。
- references/server-actions-patterns.md：错误处理、乐观更新、文件上传、进阶表单。
- references/caching-apis.md：ISR、基于 tag 的重新验证、updateTag()、refresh()、PPR 细节。
- references/error-catalog.md：调试各类 Next.js 错误。
- references/top-errors.md：5 个最常见错误的快速修复。
- 模板：async-params-page.tsx、server-action-form.tsx、route-handler-api.ts、cache-component-use-cache.tsx、parallel-routes-with-default.tsx、proxy-migration.ts。
资料给出的关键代码示例包括：异步 params 页面（await params）、Server Action 创建文章并 revalidatePath、Route Handler 的 GET/POST 与动态路由、'use cache' 缓存组件、PPR 配置与客户端计数器组件。
适用场景
需要 App Router 路由与渲染模式、Server Components 数据获取与流式渲染、Server Actions 表单与变更、Next.js 16 缓存组件与新缓存 API、15 到 16 的迁移、Route Handlers、Metadata SEO、图片字体优化与性能优化的项目。资料称其在电商、SaaS、内容站点经过生产测试。
限制
资料明确列出不适用范围：Cloudflare Workers 部署应使用 cloudflare-nextjs 技能（OpenNext 适配器，且 Cloudflare 场景保留 middleware.ts 作为 proxy.ts 的例外）；本技能仅覆盖 App Router，不含 Pages Router（属遗留模式）；认证、数据库、UI 组件库、状态管理、表单库分别由对应专门技能处理（clerk-auth/auth-js、cloudflare-d1/drizzle-orm-d1、tailwind-v4-shadcn、zustand-state-management/tanstack-query、react-hook-form-zod）。
版本信息：Next.js 16.2.0、React 19.2.0、Node.js 20.9+、TypeScript 5.9+；最后验证日期 2025-11-21。资料中的官方文档地址为 https://nextjs.org/docs，App Router 文档为 https://nextjs.org/docs/app。关于收费、价格与平台支持等资料未提供的信息，暂未提供。