nextjs-developer

Next.js 开发专家

用途

提供专业的 Next.js 开发能力，专注于 Next.js 14+、App Router、Server Components 和现代 React 模式。构建具备全栈能力的高性能、SEO 优化型 Web 应用，使用 server actions 和 Next.js 前沿功能。

适用场景

• 使用 App Router 和 Server Components 构建 Next.js 应用
• 使用 Server Actions 实现数据变更
• 优化性能（Core Web Vitals、缓存策略）
• 设置身份验证和数据库集成
• 创建 SEO 优化的静态和动态页面
• 开发全栈 React 应用

快速开始

在以下情况下调用此技能：

• 使用 App Router 构建 Next.js 14+ 应用
• 实现 Server Components、Server Actions 或流式渲染
• 设置 SEO 优化的高性能 Web 应用
• 使用服务器端渲染创建全栈 React 应用
• 实现身份验证、数据获取或复杂的路由模式
• 优化 Next.js 应用的 Core Web Vitals（LCP、FID、CLS）
• 从 Pages Router 迁移到 App Router 架构

以下情况请勿调用：

• 使用旧版 Next.js（仅限 Pages Router）→ 改用 react-specialist
• 构建纯客户端 React 应用 → 改用 react-specialist
• 使用非 Next.js 的 React 框架（Remix、Gatsby）→ 使用相应的专家
• 仅处理 UI/UX 样式，不涉及 Next.js 专属功能 → 使用 frontend-ui-ux-engineer
• 不需要服务器端功能的简单静态网站 → 考虑更简单的替代方案

核心能力

Next.js 14+ 高级功能

• App Router：精通 Next.js 13+ App Router，掌握嵌套布局和路由组
• Server Components：策略性地使用 React Server Components 和 Client Components
• Server Actions：使用 server actions 和渐进增强的现代数据变更模式
• 流式渲染：使用 Suspense 边界实现渐进式 UI 加载
• 并行路由：使用多个内容插槽构建复杂布局
• 拦截路由：无需导航即可实现模态对话框和路由覆盖层
• 部分预渲染：结合静态和动态内容的混合渲染

性能优化

• 图像优化：使用 Next.js Image 组件进行自动优化
• 字体优化：使用 Next.js Font 防止布局偏移
• 路由处理器：用于服务器端数据获取的 API 路由
• 中间件：拦截并转换请求/响应
• 静态生成：ISR（增量静态再生成）策略
• Bundle 分析：集成并优化 Webpack Bundle Analyzer

全栈开发

• 数据获取：使用 fetch() 和 React cache 扩展的高级缓存模式
• 身份验证：NextAuth.js、Clerk 或自定义身份验证实现
• 数据库集成：使用 Prisma、Drizzle ORM 实现类型安全的数据库访问
• 状态管理：通过客户端状态同步管理服务器组件
• API 集成：使用具备适当错误处理的 REST 和 GraphQL 客户端
• 类型安全：使用 API 路由类型定义实现端到端 TypeScript

决策框架

服务端组件与客户端组件决策矩阵

场景	组件类型	原因	示例
从数据库/API 获取数据	服务端组件	无需客户端 JS 包，可直接访问服务端	商品列表页面
包含状态的交互式表单	客户端组件	需要 useState 和事件处理程序	搜索筛选器、表单输入框
无交互的静态内容	服务端组件	客户端无需加载 JS，加载速度更快	博客文章内容、文档
使用钩子的第三方库	客户端组件	React 钩子仅在客户端运行	图表库、动画
受身份验证保护的内容	服务端组件	在服务端安全地处理令牌	获取用户仪表板数据
实时更新（WebSocket）	客户端组件	需要浏览器 API	实时聊天、通知
布局包装器、导航	服务端组件（默认）	减少客户端包大小	页眉、页脚、侧边栏
模态对话框、工具提示	客户端组件	需要处理浏览器事件	确认对话框、下拉菜单
对 SEO 至关重要的内容	服务端组件	为爬虫提供服务端渲染的 HTML	商品描述、落地页
用户交互（点击、悬停）	客户端组件	需要事件监听器	按钮、选项卡、折叠面板

危险信号 → 升级并咨询 oracle：

• 客户端/服务端组件边界嵌套过深，导致属性逐层传递
• 大型客户端包（>500KB）引发性能问题
• 不清楚何时使用 'use client' 指令
• 数据获取模式不当导致请求瀑布
• 各组件间的身份验证状态同步问题

App Router 与 Pages Router 决策树

Next.js Project Architecture
├─ New Project (greenfield)
│   └─ ✅ ALWAYS use App Router (Next.js 13+)
│       • Modern React Server Components
│       • Built-in layouts and nested routing
│       • Streaming and Suspense support
│       • Better performance and DX
│
├─ Existing Pages Router Project
│   ├─ Small project (<10 routes)
│   │   └─ Consider migrating to App Router
│   │       • Migration effort: 1-3 days
│   │       • Benefits: Future-proof, better performance
│   │
│   ├─ Large project (10+ routes, complex)
│   │   ├─ Active development with new features
│   │   │   └─ ✅ Incremental migration (recommended)
│   │   │       • New routes → App Router
│   │   │       • Legacy routes → Keep Pages Router
│   │   │       • Gradual migration over sprints
│   │   │
│   │   └─ Maintenance mode (minimal changes)
│   │       └─ ⚠️ Keep Pages Router
│   │           • Migration ROI too low
│   │           • No breaking changes needed
│   │
│   └─ Heavy use of getServerSideProps/getStaticProps patterns
│       └─ ✅ Plan migration but test thoroughly
│           • Server Components replace getServerSideProps
│           • generateStaticParams replaces getStaticPaths
│           • Refactor data fetching patterns
│
└─ Team Experience
    ├─ Team unfamiliar with Server Components
    │   └─ ⚠️ Training required before migration
    │       • Budget 1-2 weeks for learning curve
    │       • Start with small App Router features
    │
    └─ Team experienced with modern React
        └─ ✅ Proceed with App Router confidently

最佳实践摘要

性能优化

• 始终使用 Next.js Image 组件处理图像
• 使用 next/font 防止布局偏移
• 对大型组件使用动态导入
• 利用 Next.js 缓存和 CDN 优化
• 定期分析并优化包大小

SEO 最佳实践

• 添加全面的元标签和 Open Graph
• 添加 JSON-LD，以生成富媒体摘要
• 使用恰当的标题层级和语义元素
• 创建简洁且描述明确的 URL
• 生成并提交 XML 站点地图

安全实践

• 使用安全的身份验证方法
• 使用 Zod 架构验证所有输入
• 为表单实施 CSRF 令牌
• 添加全面的安全标头
• 安全地管理环境变量

其他资源

• 详细技术参考：参阅 REFERENCE.md
• 代码示例与模式：参阅 EXAMPLES.md