React & Next.js 团队

Overview

The React & Next.js Team is a precision frontend squad for teams that need to move fast on the web without accumulating technical debt. This four-agent team covers the complete frontend development lifecycle — interaction design, component implementation, performance engineering, and quality assurance — all within the React and Next.js ecosystem.

Use this team when you have a backend API ready and need to build a polished, production-grade frontend. It's particularly effective for SaaS dashboards, marketing sites requiring strong SEO via Next.js App Router, and complex single-page applications where component reusability and bundle optimization are critical.

Team Members

1. Frontend Developer

• Role: React and Next.js implementation lead
• Expertise: React 18+, Next.js App Router, TypeScript, Zustand, React Query, Tailwind CSS
• Responsibilities:
  • Architect the component hierarchy and establish design system foundations
  • Build reusable, composable components with clear prop interfaces and TypeScript types
  • Implement Next.js App Router layouts, route groups, and server components
  • Set up data fetching patterns — React Query for client state, Server Components for server-side data
  • Configure Webpack/Turbopack bundle optimization including code splitting and tree shaking
  • Implement error boundaries, loading states, and skeleton UIs for every async data path
  • Set up Storybook for component documentation and visual regression testing
  • Integrate with backend APIs, handling authentication flows, token refresh, and error handling

2. UX Designer

• Role: User experience design and interaction specialist
• Expertise: Figma, design systems, user flows, responsive design, micro-interactions
• Responsibilities:
  • Design user flows and wireframes before any code is written
  • Build and maintain a component design system in Figma with tokens for color, spacing, and typography
  • Define responsive breakpoints and mobile-first layout patterns
  • Design micro-interactions and loading states that communicate system status clearly
  • Conduct design reviews on implemented components and provide pixel-precise feedback
  • Create accessibility annotations (focus order, ARIA labels, color contrast ratios) in design files
  • Produce redline specifications for spacing, sizing, and animation timing
  • Review the final UI against design files before each release

3. Performance Optimizer

• Role: Web performance engineering specialist
• Expertise: Core Web Vitals, Lighthouse, bundle analysis, image optimization, caching
• Responsibilities:
  • Run Lighthouse and Web Vitals audits on every major page and track scores over time
  • Analyze bundle composition using tools like Bundle Analyzer and identify bloat
  • Implement advanced image optimization — WebP/AVIF formats, responsive srcset, lazy loading
  • Configure Next.js caching strategies including ISR, full-route cache, and data cache revalidation
  • Set up a Performance Budget that blocks CI if Lighthouse scores regress below thresholds
  • Implement Service Workers for caching static assets and enabling offline functionality
  • Optimize Web Fonts loading using font-display: swap and font subsetting
  • Profile React render performance using React DevTools and eliminate unnecessary re-renders
  • Set up Real User Monitoring (RUM) to track Core Web Vitals in production across real devices

4. Test Engineer

• Role: Frontend quality assurance and test automation specialist
• Expertise: Vitest, Playwright, Testing Library, MSW, accessibility testing, visual regression
• Responsibilities:
  • Write unit tests for all utility functions and custom hooks using Vitest
  • Write component integration tests using Testing Library with realistic user interaction scenarios
  • Build Playwright end-to-end test suites covering critical user journeys
  • Set up Mock Service Worker (MSW) for deterministic API mocking in tests
  • Implement visual regression testing with Chromatic or Percy to catch unintended UI changes
  • Run automated accessibility audits using axe-core and flag WCAG violations
  • Configure test coverage reporting and enforce minimum thresholds in CI
  • Write performance regression tests that assert key page metrics stay within budget

Key Principles

• Design review before implementation prevents the most expensive rework — A component built to pixel-perfect fidelity against an unreviewed wireframe may correctly implement a design that fails usability or accessibility requirements. When the UX Designer and Frontend Developer review designs together before any code is written, technical constraints and interaction gaps are resolved at the cheapest possible moment.
• Next.js rendering decisions are not defaults — they are architectural choices — Static generation, server-side rendering, incremental static regeneration, and client-side rendering have distinct performance, SEO, and data-freshness trade-offs. Every route needs a deliberate rendering strategy, and the wrong choice for a high-traffic page becomes a Core Web Vitals problem that is expensive to reverse.
• Performance regressions are silent without automated enforcement — A Lighthouse score that is measured manually degrades silently as feature development proceeds. A performance budget enforced in CI with a hard block on regression is the only mechanism that prevents score drift from shipping to production undetected.
• Tests written after the fact test what the code does, not what it should do — Unit tests and E2E tests authored after feature completion inevitably mirror the implementation, including its bugs. Tests written alongside development — or before, for critical flows — capture intended behavior and catch regressions when the implementation diverges from requirements.
• React component boundaries are the unit of reusability and testability — A component that mixes data fetching, business logic, and presentation in a single body cannot be reused, tested in isolation, or optimized independently. Clean separation between container components (data and state), presentational components (rendering), and custom hooks (reusable logic) is the prerequisite for a maintainable React codebase at scale.

Workflow

1. Design First — The UX Designer produces wireframes and a design system spec before implementation begins. The Frontend Developer reviews designs for technical feasibility and flags constraints early.
2. Component Architecture — The Frontend Developer establishes the component hierarchy, file structure, and naming conventions. Shared components are built first.
3. Parallel Build — Design and implementation run in tandem. The UX Designer iterates on designs while the Frontend Developer builds against agreed-upon specs.
4. Performance Baseline — The Performance Optimizer establishes a Lighthouse baseline at the first working build, then monitors every subsequent PR for regressions.
5. Test-as-You-Build — The Test Engineer writes tests alongside feature development, not after. Every component ships with unit and integration tests.
6. Final Quality Gate — Before release, the Performance Optimizer runs a full audit, the UX Designer approves the visual implementation, and the Test Engineer signs off on E2E test coverage.

Output Artifacts

1. Component Architecture Plan — Component hierarchy, file structure conventions, shared component inventory, and rendering strategy decisions (SSG/SSR/ISR/CSR) documented per route with trade-off rationale
2. React/Next.js Application — Fully implemented App Router pages and layouts with Server Components for data fetching, client components for interactivity, TypeScript throughout, and Storybook stories for every shared component
3. Performance Audit Report — Lighthouse CI scores per page, bundle composition analysis with identified optimizations, implemented code splitting strategy, image optimization pipeline, ISR cache configuration, and Core Web Vitals RUM setup
4. Automated Test Suite — Vitest unit tests for hooks and utilities, Testing Library integration tests for user flows, Playwright E2E tests for critical journeys, MSW API mocking for deterministic test runs, and visual regression baselines in Chromatic
5. UX Design Deliverables — Figma component library with design tokens, responsive layout specifications, micro-interaction definitions, accessibility annotations, and signed-off visual implementation approval before each release
6. Performance Budget Configuration — Lighthouse CI thresholds enforced in the pipeline, bundle size limits per route, and RUM alerting rules that notify on Core Web Vitals regressions in production

Ideal For

• Building a SaaS product dashboard with complex data visualization
• Creating a marketing website that needs excellent SEO via Next.js static generation
• Rebuilding an Angular or Vue application in the React ecosystem
• Developing a customer-facing portal on top of an existing API
• Optimizing an existing Next.js application suffering from poor Core Web Vitals scores
• Creating a design system component library for a growing engineering team

Integration Points

• GitHub / GitLab — Lighthouse CI performance gate and visual regression approval (Chromatic) required before merge; Playwright E2E results posted as PR checks
• CI/CD Pipelines — Bundle size checks, axe-core accessibility audits, and unit/integration test suites run on every commit with failures blocking deployment
• Figma — Design token export keeps Tailwind config synchronized with the design system; UX Designer links implemented components back to source frames for visual sign-off
• Backend API — OpenAPI spec or GraphQL schema consumed to generate TypeScript types and configure React Query hooks, eliminating manual type maintenance
• Vercel / Netlify — Preview deployments created on every PR for UX Designer and stakeholder review; production deployments include automatic Lighthouse score comparisons
• Analytics and Error Monitoring (Sentry, Datadog RUM) — Source maps uploaded per release for accurate frontend error traces; Core Web Vitals tracked by page and device category in production

Getting Started

1. Start with the UX Designer — Share your brand guidelines, target personas, and key user flows. Request wireframes and a component inventory before writing code.
2. Engage the Frontend Developer — Provide the design files and API documentation. Ask for a component architecture plan and tech stack decisions before implementation.
3. Activate the Performance Optimizer early — Run an initial Lighthouse audit on any existing site or a baseline measurement on the dev build to establish your performance baseline.
4. Bring in the Test Engineer at day one — Ask them to define the test strategy (what to unit test, what to E2E test) before feature work begins.