What frameworks and versions does this workflow support?

This workflow is designed for React 18+, Next.js 14+, and TypeScript 5+. It uses modern patterns like App Router and Server Components, and is not compatible with other frameworks.

What are the eight phases of this workflow?

The workflow consists of: (1) project setup, (2) component architecture, (3) styling and design, (4) data fetching, (5) routing and navigation, (6) forms and validation, (7) testing, and (8) build and deployment.

What testing tools and approaches does this workflow use?

The workflow uses Vitest for unit and component tests, Playwright for end-to-end testing, and includes CI integration configuration.

Where does this workflow deploy applications?

Applications are deployed to Vercel with support for preview deployments, environment variable configuration, and bundle size optimization.

Skill

Build React/Next.js Apps with Modern Patterns

Name: React/Next.js Development Workflow
Availability: OnlineOnly
Author: Antigravity

Orchestrates React/Next.js 14+ development: App Router, components, styling, data fetching, testing, and deployment.

Get skill

Works with vercelvitereactnextjstypescript

Antigravity

Own this? Claim it

Spark score

out of 100

Updated last month

Version 13.1.0

Add to Favorites

Why it matters

Streamline the development of modern React and Next.js 14+ applications. This asset guides you through project setup, component architecture, styling, data fetching, and deployment using TypeScript and Tailwind CSS.

Outcomes

What it gets done

Scaffold new Next.js 14+ projects with App Router.

Implement Server Components and modern React patterns.

Configure TypeScript, Tailwind CSS, and state management.

Set up testing with Vitest and Playwright, and deploy to Vercel.

Install

Add it to your toolbox

Run in your project directory:

curl -fsSL https://spark.entire.vc/get/ag-react-nextjs-development | bash

Overview

React/Next.js Development Workflow

Orchestrates an eight-phase React/Next.js 14+ development workflow covering App Router, component architecture, styling, testing, and deployment. Use when building a new React or Next.js 14+ application from project setup through deployment.

What it does

Orchestrates an eight-phase workflow for building React and Next.js 14+ applications with modern patterns - App Router, Server Components, TypeScript, and Tailwind CSS.

When to use - and when NOT to

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, or building full-stack Next.js applications. Not a fit for other frameworks or for the general development/testing-qa/documentation workflow bundles' broader concerns.

Inputs and outputs

Phase 1 (project setup) invokes app-builder, senior-fullstack, nextjs-app-router-patterns, and typescript-pro to choose the project type and build tool, scaffold structure, configure TypeScript, and set up ESLint/Prettier. Phase 2 (component architecture) invokes frontend-developer, react-patterns, react-state-management, and react-ui-patterns to design the component hierarchy, create base/layout components, set up state management (Zustand), and build custom hooks. Phase 3 (styling and design) invokes frontend-design, tailwind-patterns, tailwind-design-system, and core-components to set up Tailwind CSS v4, configure design tokens, and implement responsive component styles.

Phase 4 (data fetching) invokes nextjs-app-router-patterns, react-state-management, and api-patterns to implement Server Components data fetching, set up React Query/SWR, create an API client, and handle loading states/error boundaries. Phase 5 (routing and navigation) invokes nextjs-app-router-patterns and nextjs-best-practices to set up file-based routing, dynamic and nested routes, route guards, and parallel/intercepting routes. Phase 6 (forms and validation) invokes frontend-developer, typescript-advanced-types, and react-ui-patterns to choose a form library, set up Zod/Yup validation, and handle submissions and errors.

Phase 7 (testing) invokes javascript-testing-patterns, playwright-skill, and e2e-testing-patterns to set up Vitest, write unit and component tests, implement Playwright E2E tests, and configure CI integration. Phase 8 (build and deployment) invokes vercel-deployment, vercel-deploy-claimable, and web-performance-optimization to configure build settings, optimize bundle size, set environment variables, and deploy to Vercel with preview deployments.

The recommended technology stack is Next.js 14+/React 18+, TypeScript 5+, Tailwind CSS v4, Zustand/React Query for state, React Hook Form/Zod for forms, Vitest/Playwright for testing, and Vercel for deployment. Quality gates require TypeScript compiling without errors, all tests passing, clean linting, met performance metrics (LCP, CLS, FID), WCAG 2.1 accessibility, and verified responsive design.

Integrations

Coordinates Next.js App Router, React Server Components, TypeScript, Tailwind CSS v4, Zustand/React Query, React Hook Form/Zod, Vitest/Playwright, and Vercel deployment across a full development pipeline.

Who it's for

Frontend teams building modern Next.js 14+/React applications who need a coordinated, phase-by-phase workflow from project setup through deployment rather than assembling each concern independently.

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

FAQ

Common questions

Discussion