Back to Details

nextjs-developer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Next.js Developer Specialist

Next.js开发专家

Purpose

用途

Provides expert Next.js development expertise specializing in Next.js 14+, App Router, Server Components, and modern React patterns. Builds high-performance, SEO-optimized web applications with full-stack capabilities, server actions, and cutting-edge Next.js features.
提供专业的Next.js开发知识，专精于Next.js 14+、App Router、Server Components以及现代React模式。可构建具备全栈能力、支持Server Actions和Next.js前沿特性的高性能、SEO优化Web应用。

When to Use

适用场景

  • Building Next.js applications with App Router and Server Components
  • Implementing Server Actions for data mutation
  • Optimizing performance (Core Web Vitals, caching strategies)
  • Setting up authentication and database integration
  • Creating SEO-optimized static and dynamic pages
  • Developing full-stack React applications
  • 使用App Router和Server Components构建Next.js应用
  • 实现Server Actions完成数据变更
  • 优化性能（Core Web Vitals、缓存策略）
  • 配置身份验证和数据库集成
  • 创建SEO优化的静态和动态页面
  • 开发全栈React应用

Quick Start

快速入门

Invoke this skill when:
  • Building Next.js 14+ applications with App Router
  • Implementing Server Components, Server Actions, or streaming rendering
  • Setting up SEO-optimized, high-performance web applications
  • Creating full-stack React applications with server-side rendering
  • Implementing authentication, data fetching, or complex routing patterns
  • Optimizing Core Web Vitals (LCP, FID, CLS) for Next.js apps
  • Migrating from Pages Router to App Router architecture
Do NOT invoke when:
  • Working with legacy Next.js (Pages Router only) → Use react-specialist instead
  • Building purely client-side React apps → Use react-specialist
  • Working on non-Next.js React frameworks (Remix, Gatsby) → Use appropriate specialist
  • Handling only UI/UX styling without Next.js-specific features → Use frontend-ui-ux-engineer
  • Simple static sites without server-side requirements → Consider simpler alternatives
可调用本技能的场景：
  • 使用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
  • 无服务端需求的简单静态站点 → 考虑使用更简单的替代方案

Core Capabilities

核心能力

Next.js 14+ Advanced Features

Next.js 14+ 高级特性

  • App Router: Mastery of Next.js 13+ App Router with nested layouts and route groups
  • Server Components: Strategic use of React Server Components vs Client Components
  • Server Actions: Modern data mutation patterns with server actions and progressive enhancement
  • Streaming Rendering: Implementing progressive UI loading with Suspense boundaries
  • Parallel Routes: Complex layouts with multiple content slots
  • Intercepting Routes: Modal dialogs and route overlays without navigation
  • Partial Prerendering: Hybrid rendering with static and dynamic content
  • App Router：精通Next.js 13+ App Router，支持嵌套布局和路由分组
  • Server Components：能够合理选择使用React Server Components和Client Components
  • Server Actions：结合Server Actions和渐进式增强实现现代化数据变更模式
  • 流式渲染：通过Suspense边界实现渐进式UI加载
  • 并行路由：支持多内容插槽的复杂布局
  • 拦截路由：无需跳转即可实现模态框和路由覆盖
  • 部分预渲染：支持静态和动态内容的混合渲染

Performance Optimization

性能优化

  • Image Optimization: Next.js Image component with automatic optimization
  • Font Optimization: Next.js Font with layout shift prevention
  • Route Handlers: API routes for server-side data fetching
  • Middleware: Request/response interception and transformation
  • Static Generation: ISR (Incremental Static Regeneration) strategies
  • Bundle Analysis: Webpack Bundle Analyzer integration and optimization
  • 图片优化：使用Next.js Image组件实现自动优化
  • 字体优化：使用Next.js Font避免布局偏移
  • 路由处理器：用于服务端数据获取的API路由
  • 中间件：请求/响应拦截和转换
  • 静态生成：ISR（增量静态再生）策略
  • 包体积分析：Webpack Bundle Analyzer集成和优化

Full-Stack Development

全栈开发

  • Data Fetching: Advanced caching patterns with fetch() and React's cache extension
  • Authentication: NextAuth.js, Clerk, or custom auth implementations
  • Database Integration: Prisma, Drizzle ORM with type-safe database access
  • State Management: Server components with client state synchronization
  • API Integration: REST and GraphQL clients with proper error handling
  • Type Safety: End-to-end TypeScript with API route type definitions
  • 数据获取：结合fetch()和React缓存扩展实现高级缓存模式
  • 身份验证：支持NextAuth.js、Clerk或自定义身份验证实现
  • 数据库集成：Prisma、Drizzle ORM实现类型安全的数据库访问
  • 状态管理：Server Components与客户端状态同步
  • API集成：REST和GraphQL客户端，具备完善的错误处理能力
  • 类型安全：全链路TypeScript，包含API路由类型定义

Decision Framework

决策框架

Server Components vs Client Components Decision Matrix

Server Components 与 Client Components 决策矩阵

ScenarioComponent TypeReasoningExample
Data fetching from database/APIServer ComponentNo client JS bundle, direct server accessProduct listing page
Interactive forms with stateClient ComponentNeeds useState, event handlersSearch filters, form inputs
Static content with no interactivityServer ComponentZero JS to client, faster loadBlog post content, docs
Third-party libraries using hooksClient ComponentReact hooks only work client-sideChart libraries, animations
Authentication-protected contentServer ComponentSecure token handling server-sideUser dashboard data fetch
Real-time updates (WebSocket)Client ComponentBrowser APIs requiredLive chat, notifications
Layout wrappers, navigationServer Component (default)Reduce client bundle sizeHeader, footer, sidebar
Modal dialogs, tooltipsClient ComponentNeeds browser event handlingConfirmation dialogs, dropdowns
SEO-critical contentServer ComponentServer-rendered HTML for crawlersProduct descriptions, landing pages
User interactions (clicks, hover)Client ComponentEvent listeners requiredButtons, tabs, accordions
Red Flags → Escalate to oracle:
  • Deeply nested Client/Server component boundaries causing prop drilling
  • Performance issues with large client bundles (>500KB)
  • Confusion about when to use 
    'use client'
    directive
  • Waterfall requests due to improper data fetching patterns
  • Authentication state synchronization issues across components
场景组件类型原因示例
从数据库/API获取数据Server Component无客户端JS包，可直接访问服务端商品列表页
带状态的交互式表单Client Component需要useState、事件处理器搜索筛选器、表单输入
无交互的静态内容Server Component零JS下发到客户端，加载速度更快博客文章内容、文档
使用Hook的第三方库Client ComponentReact Hook仅在客户端生效图表库、动画
受身份验证保护的内容Server Component服务端安全处理令牌用户仪表盘数据获取
实时更新（WebSocket）Client Component需要浏览器API支持实时聊天、通知
布局容器、导航Server Component（默认）减小客户端包体积头部、底部、侧边栏
模态框、工具提示Client Component需要浏览器事件处理确认对话框、下拉菜单
SEO关键内容Server Component服务端渲染HTML便于爬虫抓取商品描述、落地页
用户交互（点击、悬浮）Client Component需要事件监听器按钮、标签页、手风琴组件
危险信号 → 升级至oracle处理：
  • Client/Server组件边界嵌套过深导致属性透传问题
  • 客户端包体积过大（>500KB）引发的性能问题
  • 不清楚何时使用
    'use client'
    指令
  • 数据获取模式不合理导致的请求瀑布流
  • 跨组件的身份验证状态同步问题

App Router vs Pages Router Decision Tree

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 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

Best Practices Summary

最佳实践汇总

Performance Optimization

性能优化

  • Always use Next.js Image component for images
  • Use next/font for layout shift prevention
  • Implement dynamic imports for large components
  • Leverage Next.js caching and CDN optimization
  • Regularly analyze and optimize bundle size
  • 图片始终使用Next.js Image组件
  • 使用next/font避免布局偏移
  • 大型组件实现动态导入
  • 利用Next.js缓存和CDN优化能力
  • 定期分析和优化包体积

SEO Best Practices

SEO最佳实践

  • Implement comprehensive meta tags and Open Graph
  • Add JSON-LD for rich snippets
  • Use proper heading hierarchy and semantic elements
  • Create clean, descriptive URLs
  • Generate and submit XML sitemaps
  • 配置完善的元标签和Open Graph
  • 添加JSON-LD实现富摘要
  • 使用合理的标题层级和语义化元素
  • 创建简洁、描述性的URL
  • 生成并提交XML站点地图

Security Practices

安全实践

  • Use secure authentication methods
  • Validate all inputs with Zod schemas
  • Implement CSRF tokens for forms
  • Add comprehensive security headers
  • Securely manage environment variables
  • 使用安全的身份验证方式
  • 通过Zod schema验证所有输入
  • 表单添加CSRF令牌
  • 配置完善的安全头
  • 安全管理环境变量

Additional Resources

额外资源

  • Detailed Technical Reference: See REFERENCE.md
  • Code Examples & Patterns: See EXAMPLES.md
  • 详细技术参考：查看REFERENCE.md
  • 代码示例与模式：查看EXAMPLES.md