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（增量静态再生）策略； 打包分析：Webpack Bundle Analyzer 集成与优化。
全栈开发： 数据获取：使用 fetch() 与 React 的 cache 扩展的高级缓存模式； 身份认证：NextAuth.js、Clerk 或自定义认证实现； 数据库集成：Prisma、Drizzle ORM 与类型安全的数据库访问； 状态管理：Server Components 与客户端状态同步； API 集成：REST 与 GraphQL 客户端及恰当的错误处理； 类型安全：端到端 TypeScript 与 API 路由类型定义。
决策框架 Server Components 与 Client Components 决策矩阵： 从数据库/API 获取数据 → Server Component，原因：无客户端 JS 包、可直接访问服务端，示例：商品列表页； 带状态的交互式表单 → Client Component，原因：需要 useState、事件处理器，示例：搜索筛选、表单输入； 无交互的静态内容 → Server Component，原因：零 JS 下发、加载更快，示例：博客正文、文档； 使用 hooks 的第三方库 → Client Component，原因：React hooks 仅在客户端可用，示例：图表库、动画； 受认证保护的内容 → Server Component，原因：服务端安全处理令牌，示例：用户仪表盘数据获取； 实时更新（WebSocket）→ Client Component，原因：需要浏览器 API，示例：实时聊天、通知； 布局包裹、导航 → Server Component（默认），原因：减小客户端包体积，示例：页头、页脚、侧边栏； 模态对话框、提示框 → Client Component，原因：需要浏览器事件处理，示例：确认对话框、下拉菜单； SEO 关键内容 → Server Component，原因：为爬虫提供服务端渲染 HTML，示例：商品描述、落地页； 用户交互（点击、悬停）→ Client Component，原因：需要事件监听，示例：按钮、标签页、手风琴。
危险信号 → 升级至 oracle： Client/Server 组件边界嵌套过深导致属性透传； 大客户端包（>500KB）引发性能问题； 对何时使用 'use client' 指令存在困惑； 数据获取模式不当导致瀑布式请求； 跨组件认证状态同步问题。
App Router 与 Pages Router 决策树 Next.js 项目架构： 新项目（全新项目）→ 始终使用 App Router（Next.js 13+）：现代 React Server Components、内置布局与嵌套路由、支持流式与 Suspense、更好的性能与开发体验。 现有 Pages Router 项目： 小项目（<10 条路由）→ 考虑迁移到 App Router，迁移工作量 1-3 天，收益：面向未来、更佳性能； 大项目（10+ 路由、复杂）： 活跃开发且新增功能 → 推荐增量迁移：新路由用 App Router，旧路由保留 Pages Router，按迭代逐步迁移； 维护模式（极少改动）→ 保留 Pages Router，迁移投入产出比过低，无需破坏性改动； 大量使用 getServerSideProps/getStaticProps 模式 → 规划迁移但需充分测试：Server Components 替代 getServerSideProps，generateStaticParams 替代 getStaticPaths，重构数据获取模式。 团队经验： 团队不熟悉 Server Components → 迁移前需培训，预留 1-2 周学习曲线，从小的 App Router 功能开始； 团队熟悉现代 React → 可放心推进 App Router。
最佳实践摘要 性能优化： 图片始终使用 Next.js Image 组件； 使用 next/font 防止布局偏移； 对大型组件实现动态导入； 利用 Next.js 缓存与 CDN 优化； 定期分析并优化包体积。
SEO 最佳实践： 实现完整的 meta 标签与 Open Graph； 添加 JSON-LD 以获得富摘要； 使用正确的标题层级与语义化元素； 创建简洁、描述性的 URL； 生成并提交 XML sitemap。
安全实践： 使用安全的认证方式； 使用 Zod schema 校验所有输入； 为表单实现 CSRF 令牌； 添加完善的安全响应头； 安全地管理环境变量。
附加资源 详细技术参考：见 REFERENCE.md； 代码示例与模式：见 EXAMPLES.md。