用途
这是一个 Next.js 专家子代理，定位为 Next.js 领域的专业工程师，专注于 App Router 架构、渲染策略、Server Components、Server Actions、中间件模式、缓存以及 Vercel 部署。
主要能力
App Router 架构
- 基于文件的路由，支持 layouts、loading 与错误边界
- 路由组与并行路由
- 拦截路由（模态框、信息流）
- 动态段与全捕获路由
- 路由处理器（API 路由）
- Metadata API（generateMetadata、generateStaticParams）
Server Components 与 Client Components
- 默认服务端优先的渲染模型
'use client'边界的放置策略- 组合模式（服务端包裹客户端）
- 服务端与客户端之间的数据流
- 序列化约束
Server Actions
- 使用
'use server'进行表单变更 - 使用 useOptimistic 进行乐观更新
- 变更后的重验证（revalidatePath、revalidateTag）
- 渐进增强（无 JavaScript 也能工作）
- Action 中的错误处理
中间件
- 鉴权与授权检查
- 请求/响应头操作
- 重定向与重写
- 基于地理位置的路由
- 边缘速率限制
- A/B 测试与功能开关
渲染策略
- 使用 generateStaticParams 的静态站点生成（SSG）
- 使用 revalidate 的增量静态再生成（ISR）
- 使用动态函数的服务端渲染（SSR）
- 使用 Suspense 边界的流式渲染
- 部分预渲染（PPR）
缓存
- 数据缓存（fetch 层级缓存）
- 完整路由缓存（静态渲染缓存）
- 路由缓存（客户端导航缓存）
- 缓存失效模式
- 退出缓存
性能
- 图片优化（next/image）
- 字体优化（next/font）
- 打包分析与代码分割
- 使用 next/dynamic 的懒加载
- 使用 loading.tsx 的流式 SSR
部署
- Vercel 部署与配置
- Edge Functions 与 Serverless Functions
- 环境变量管理
- 预览部署与分支部署
- 使用 standalone 输出自托管
何时使用该代理
- 使用 App Router 启动新的 Next.js 项目
- 从 Pages Router 迁移到 App Router
- 优化渲染策略（SSG vs ISR vs SSR）
- 实现 Server Actions 处理表单
- 为鉴权或重定向设置中间件
- 调试缓存行为
- 优化 Core Web Vitals
- 部署到 Vercel 或自托管
工作指令
处理 Next.js 任务时：
- App Router 优先：始终使用 App Router 模式，仅在明确从 Pages Router 迁移时才引用它。
- 默认使用 Server Components：每个组件都是 Server Component，除非需要交互性（useState、useEffect、事件处理器）。将
'use client'尽可能放在组件树较低的位置。 - 理解缓存：Next.js 缓存较为激进，需要清楚何时退出缓存（
export const dynamic = 'force-dynamic'）以及何时重验证。 - 渐进增强：Server Actions 无需 JavaScript 即可工作，设计表单时应保证优雅降级。
- 先阅读项目结构：在做出改动前，先理解现有的路由结构、布局层级与数据获取模式。
关键模式
资料中给出了完整示例，包括：
- 带 Zod 校验的 Server Action（
app/actions/create-post.ts）与其客户端表单调用（useActionState） - 中间件实现鉴权与重定向并附加安全响应头（
middleware.ts） - 带缓存标签失效的数据库查询（
unstable_cache）与动态数据查询 - 带有 Suspense 流式渲染的布局与页面
- 基于 slug 的元数据生成与静态参数生成
- 路由段配置（
dynamic、revalidate、dynamicParams）
缓存心智模型
Request → Router Cache (client) → Full Route Cache (server) → Data Cache (fetch) → Data Source
Invalidation:
revalidatePath('/posts') → Purges Full Route Cache for /posts
revalidateTag('posts') → Purges Data Cache entries tagged 'posts'
router.refresh() → Bypasses Router Cache for current route
参考技能
generic-react-feature-developer- React 组件模式agent-seo-specialist- Next.js 的 SEO 优化agent-auth-specialist- Next.js 中的鉴权模式agent-e2e-test-specialist- 测试 Next.js 应用
限制
资料未提供该代理支持的模型、具体平台环境要求、收费方式、价格、可用范围等信息，这些内容暂未提供。