Back to Details

react-nextjs-development

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

React/Next.js Development Workflow

React/Next.js开发工作流

Overview

概述

Specialized workflow for building React and Next.js 14+ applications with modern patterns including App Router, Server Components, TypeScript, and Tailwind CSS.
这是一套专门用于构建React和Next.js 14+应用的工作流，采用App Router、Server Components、TypeScript和Tailwind CSS等现代模式。

When to Use This Workflow

何时使用此工作流

Use this workflow when:
  • Building new React applications
  • Creating Next.js 14+ projects with App Router
  • Implementing Server Components
  • Setting up TypeScript with React
  • Styling with Tailwind CSS
  • Building full-stack Next.js applications
在以下场景使用此工作流：
  • 构建新的React应用
  • 创建采用App Router的Next.js 14+项目
  • 实现Server Components
  • 为React配置TypeScript
  • 使用Tailwind CSS进行样式开发
  • 构建全栈Next.js应用

Workflow Phases

工作流阶段

Phase 1: Project Setup

第一阶段：项目搭建

Skills to Invoke

可调用技能

  • app-builder
    - Application scaffolding
  • senior-fullstack
    - Full-stack guidance
  • nextjs-app-router-patterns
    - Next.js 14+ patterns
  • typescript-pro
    - TypeScript setup
  • app-builder
    - 应用脚手架生成
  • senior-fullstack
    - 全栈开发指导
  • nextjs-app-router-patterns
    - Next.js 14+模式实践
  • typescript-pro
    - TypeScript配置

Actions

操作步骤

  1. Choose project type (React SPA, Next.js app)
  2. Select build tool (Vite, Next.js, Create React App)
  3. Scaffold project structure
  4. Configure TypeScript
  5. Set up ESLint and Prettier
  1. 选择项目类型（React单页应用、Next.js应用）
  2. 选择构建工具（Vite、Next.js、Create React App）
  3. 生成项目结构
  4. 配置TypeScript
  5. 搭建ESLint和Prettier环境

Copy-Paste Prompts

可复制粘贴的提示词

Use @app-builder to scaffold a new Next.js 14 project with App Router
Use @nextjs-app-router-patterns to set up Server Components
Use @app-builder to scaffold a new Next.js 14 project with App Router
Use @nextjs-app-router-patterns to set up Server Components

Phase 2: Component Architecture

第二阶段：组件架构

Skills to Invoke

可调用技能

  • frontend-developer
    - Component development
  • react-patterns
    - React patterns
  • react-state-management
    - State management
  • react-ui-patterns
    - UI patterns
  • frontend-developer
    - 组件开发
  • react-patterns
    - React模式实践
  • react-state-management
    - 状态管理
  • react-ui-patterns
    - UI模式实践

Actions

操作步骤

  1. Design component hierarchy
  2. Create base components
  3. Implement layout components
  4. Set up state management
  5. Create custom hooks
  1. 设计组件层级结构
  2. 创建基础组件
  3. 实现布局组件
  4. 搭建状态管理系统
  5. 自定义Hooks

Copy-Paste Prompts

可复制粘贴的提示词

Use @frontend-developer to create reusable React components
Use @react-patterns to implement proper component composition
Use @react-state-management to set up Zustand store
Use @frontend-developer to create reusable React components
Use @react-patterns to implement proper component composition
Use @react-state-management to set up Zustand store

Phase 3: Styling and Design

第三阶段：样式与设计

Skills to Invoke

可调用技能

  • frontend-design
    - UI design
  • tailwind-patterns
    - Tailwind CSS
  • tailwind-design-system
    - Design system
  • core-components
    - Component library
  • frontend-design
    - UI设计
  • tailwind-patterns
    - Tailwind CSS实践
  • tailwind-design-system
    - 设计系统搭建
  • core-components
    - 组件库开发

Actions

操作步骤

  1. Set up Tailwind CSS
  2. Configure design tokens
  3. Create utility classes
  4. Build component styles
  5. Implement responsive design
  1. 搭建Tailwind CSS环境
  2. 配置设计令牌
  3. 创建工具类
  4. 编写组件样式
  5. 实现响应式设计

Copy-Paste Prompts

可复制粘贴的提示词

Use @tailwind-patterns to style components with Tailwind CSS v4
Use @frontend-design to create a modern dashboard UI
Use @tailwind-patterns to style components with Tailwind CSS v4
Use @frontend-design to create a modern dashboard UI

Phase 4: Data Fetching

第四阶段：数据获取

Skills to Invoke

可调用技能

  • nextjs-app-router-patterns
    - Server Components
  • react-state-management
    - React Query
  • api-patterns
    - API integration
  • nextjs-app-router-patterns
    - Server Components实践
  • react-state-management
    - React Query使用
  • api-patterns
    - API集成

Actions

操作步骤

  1. Implement Server Components
  2. Set up React Query/SWR
  3. Create API client
  4. Handle loading states
  5. Implement error boundaries
  1. 实现Server Components
  2. 搭建React Query/SWR环境
  3. 创建API客户端
  4. 处理加载状态
  5. 实现错误边界

Copy-Paste Prompts

可复制粘贴的提示词

Use @nextjs-app-router-patterns to implement Server Components data fetching
Use @nextjs-app-router-patterns to implement Server Components data fetching

Phase 5: Routing and Navigation

第五阶段：路由与导航

Skills to Invoke

可调用技能

  • nextjs-app-router-patterns
    - App Router
  • nextjs-best-practices
    - Next.js patterns
  • nextjs-app-router-patterns
    - App Router实践
  • nextjs-best-practices
    - Next.js最佳实践

Actions

操作步骤

  1. Set up file-based routing
  2. Create dynamic routes
  3. Implement nested routes
  4. Add route guards
  5. Configure redirects
  1. 搭建基于文件的路由系统
  2. 创建动态路由
  3. 实现嵌套路由
  4. 添加路由守卫
  5. 配置重定向规则

Copy-Paste Prompts

可复制粘贴的提示词

Use @nextjs-app-router-patterns to set up parallel routes and intercepting routes
Use @nextjs-app-router-patterns to set up parallel routes and intercepting routes

Phase 6: Forms and Validation

第六阶段：表单与验证

Skills to Invoke

可调用技能

  • frontend-developer
    - Form development
  • typescript-advanced-types
    - Type validation
  • react-ui-patterns
    - Form patterns
  • frontend-developer
    - 表单开发
  • typescript-advanced-types
    - 类型验证
  • react-ui-patterns
    - 表单模式实践

Actions

操作步骤

  1. Choose form library (React Hook Form, Formik)
  2. Set up validation (Zod, Yup)
  3. Create form components
  4. Handle submissions
  5. Implement error handling
  1. 选择表单库（React Hook Form、Formik）
  2. 搭建验证系统（Zod、Yup）
  3. 创建表单组件
  4. 处理表单提交
  5. 实现错误处理

Copy-Paste Prompts

可复制粘贴的提示词

Use @frontend-developer to create forms with React Hook Form and Zod
Use @frontend-developer to create forms with React Hook Form and Zod

Phase 7: Testing

第七阶段：测试

Skills to Invoke

可调用技能

  • javascript-testing-patterns
    - Jest/Vitest
  • playwright-skill
    - E2E testing
  • e2e-testing-patterns
    - E2E patterns
  • javascript-testing-patterns
    - Jest/Vitest使用
  • playwright-skill
    - E2E测试
  • e2e-testing-patterns
    - E2E模式实践

Actions

操作步骤

  1. Set up testing framework
  2. Write unit tests
  3. Create component tests
  4. Implement E2E tests
  5. Configure CI integration
  1. 搭建测试框架
  2. 编写单元测试
  3. 创建组件测试
  4. 实现E2E测试
  5. 配置CI集成

Copy-Paste Prompts

可复制粘贴的提示词

Use @javascript-testing-patterns to write Vitest tests
Use @playwright-skill to create E2E tests for critical flows
Use @javascript-testing-patterns to write Vitest tests
Use @playwright-skill to create E2E tests for critical flows

Phase 8: Build and Deployment

第八阶段：构建与部署

Skills to Invoke

可调用技能

  • vercel-deployment
    - Vercel deployment
  • vercel-deploy-claimable
    - Vercel deployment
  • web-performance-optimization
    - Performance
  • vercel-deployment
    - Vercel部署
  • vercel-deploy-claimable
    - Vercel部署
  • web-performance-optimization
    - 性能优化

Actions

操作步骤

  1. Configure build settings
  2. Optimize bundle size
  3. Set up environment variables
  4. Deploy to Vercel
  5. Configure preview deployments
  1. 配置构建设置
  2. 优化包体积
  3. 搭建环境变量
  4. 部署至Vercel
  5. 配置预览部署

Copy-Paste Prompts

可复制粘贴的提示词

Use @vercel-deployment to deploy Next.js app to production
Use @vercel-deployment to deploy Next.js app to production

Technology Stack

技术栈

CategoryTechnology
FrameworkNext.js 14+, React 18+
LanguageTypeScript 5+
StylingTailwind CSS v4
StateZustand, React Query
FormsReact Hook Form, Zod
TestingVitest, Playwright
DeploymentVercel
分类技术
框架Next.js 14+, React 18+
语言TypeScript 5+
样式Tailwind CSS v4
状态管理Zustand, React Query
表单React Hook Form, Zod
测试Vitest, Playwright
部署Vercel

Quality Gates

质量检查清单

  • TypeScript compiles without errors
  • All tests passing
  • Linting clean
  • Performance metrics met (LCP, CLS, FID)
  • Accessibility checked (WCAG 2.1)
  • Responsive design verified
  • TypeScript编译无错误
  • 所有测试通过
  • 代码检查无问题
  • 达到性能指标（LCP、CLS、FID）
  • 无障碍检查通过（WCAG 2.1）
  • 响应式设计验证通过

Related Workflow Bundles

相关工作流包

  • development
    - General development
  • testing-qa
    - Testing workflow
  • documentation
    - Documentation
  • typescript-development
    - TypeScript patterns
  • development
    - 通用开发
  • testing-qa
    - 测试工作流
  • documentation
    - 文档编写
  • typescript-development
    - TypeScript模式实践