React/Next.js Development Workflow

Specialized workflow for building React and Next.js 14+ applications with modern patterns.

When to Use

• 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

Workflow Phases

Phase 1: Project Setup

1. Choose project type (React SPA, Next.js app)
2. Select build tool (Vite, Next.js)
3. Scaffold project structure
4. Configure TypeScript
5. Set up ESLint and Prettier

Phase 2: Component Architecture

1. Design component hierarchy
2. Create base components
3. Implement layout components
4. Set up state management (Zustand, React Query)
5. Create custom hooks

Phase 3: Styling and Design

1. Set up Tailwind CSS v4
2. Configure design tokens
3. Create utility classes
4. Build component styles
5. Implement responsive design

Phase 4: Data Fetching

1. Implement Server Components
2. Set up React Query/SWR
3. Create API client
4. Handle loading states
5. Implement error boundaries

Phase 5: Routing and Navigation

1. Set up file-based routing (App Router)
2. Create dynamic routes
3. Implement nested routes
4. Add route guards
5. Configure redirects

Phase 6: Forms and Validation

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

Phase 7: Testing

1. Set up testing framework (Vitest)
2. Write unit tests
3. Create component tests
4. Implement E2E tests (Playwright)
5. Configure CI integration

Phase 8: Build and Deployment

1. Configure build settings
2. Optimize bundle size
3. Set up environment variables
4. Deploy to Vercel
5. Configure preview deployments

Technology Stack

Category	Technology
Framework	Next.js 14+, React 18+
Language	TypeScript 5+
Styling	Tailwind CSS v4
State	Zustand, React Query
Forms	React Hook Form, Zod
Testing	Vitest, Playwright
Deployment	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