用途：该技能面向使用 Next.js 16+ App Router 架构构建现代 React 应用，提供模式与代码示例。触发场景包括创建 Next.js 16 项目、设置 App Router、服务端/客户端组件、Server Action 与表单提交、Route Handler 与 API 端点、use cache 缓存与重新验证、并行路由与拦截路由、proxy.ts 迁移、layout/page/loading/error/not-found 文件约定、generateMetadata、next/image、next/font 等。
主要能力：说明默认服务端组件（可 async/await 取数）与客户端组件（"use client" 使用 hooks、浏览器 API、事件处理）；Server Action 用 "use server"，结合 useActionState 处理表单、pending 状态与 revalidatePath；Route Handler 以 route.ts 提供 GET/POST，动态段用 [param]；Next.js 16 显式缓存指令 "use cache" 配合 cacheLife、cacheTag 与按需 revalidateTag；并行路由用 @folder 插槽；Next.js 16 的 cookies()、headers()、draftMode() 及 params、searchParams 均为异步 Promise。
使用方式：创建项目命令 npx create-next-app@latest my-app --typescript --tailwind --app --turbopack。服务端组件默认运行在服务端；客户端组件需加 "use client"；Server Action 定义在独立文件并加 "use server"，可从客户端组件表单调用；缓存页面加 "use cache" 并设置 cacheTag/cacheLife。
适用场景与限制：适合博客表单、缓存商品页、并行路由仪表盘等。限制：服务端组件不能用浏览器 API 或 React hooks；客户端组件不能为 async；客户端组件中用 await 会构建报错；Next.js 16 中忘记 await cookies()/headers() 会拿到 Promise；Server Actions 缺少校验可能带来未授权访问风险；服务端组件 fetch 第三方 URL 时需校验、清洗和类型检查响应，API 地址建议使用环境变量。资料暂未提供费用、平台限制或其他扩展信息。