create-vite vs create-next-app vs create-react-app: When to Choose Vite vs Next.js vs CRA

While create-vite@latest scaffolds a minimal client-side React app with a lightning-fast dev server, create-next-app generates a full-stack framework with server-side rendering and file-system routing, and create-react-app provides a basic single-page application boilerplate without built-in server capabilities.

When starting a new React project, selecting the right scaffolding tool determines your application’s architecture, performance characteristics, and deployment options. This guide examines the implementation details in the vercel/next.js repository to break down the technical differences between these three approaches, from bundler internals to routing conventions.

Core Architectural Differences

Each tool optimizes for a distinct development paradigm.

Vite (create-vite@latest) focuses exclusively on the development experience and bundling. The CLI generates a vite.config.ts that leverages esbuild for rapid TypeScript transpilation during development and Rollup for optimized production builds. The dev server serves native ES modules on-demand, eliminating the need for traditional bundling during development.

Next.js (create-next-app) operates as a full-stack React framework. According to the source code in packages/create-next-app/create-app.ts, the scaffolding process detects your package manager, copies templates (such as templates/app-empty/ts/ or templates/default/ts/), and writes a next.config.ts that configures the Next.js compiler, image optimization, and font optimization. Unlike Vite or CRA, Next.js includes a complete server layer capable of SSR, SSG, and API route handling.

Create React App (CRA) generates a client-side only single-page application (SPA). The tool hides Webpack configuration inside react-scripts, offering no server-side rendering capabilities or routing conventions out of the box.

Rendering Models and Routing

The fundamental divergence lies in how each tool handles rendering and navigation.

Vite supports client-side rendering (CSR) exclusively. You must manually integrate a router like react-router, and the application runs entirely in the browser after the initial JavaScript bundle downloads.

Next.js provides multiple rendering strategies through the file-system router implemented in packages/next/src/server/lib/router-server.ts. The framework automatically maps files in pages/ or app/ directories to URL routes, supporting:

• Server-Side Rendering (SSR)
• Static Site Generation (SSG)
• Incremental Static Regeneration (ISR)

CRA renders purely on the client-side with no built-in routing system, requiring developers to configure client-side navigation manually.

API and Backend Capabilities

Only Next.js includes integrated backend functionality.

The Next.js scaffold sets up API routes (pages/api/* or app/api/*) that execute server-side code on the same Node.js server handling your React application. This eliminates the need for a separate backend server during development and simplifies full-stack deployment.

Vite and CRA offer no built-in API layer. To add server-side functionality, you must run a separate Node.js server or serverless functions independently from the frontend build process.

Build Tools and Configuration

Each tool exposes different levels of configuration complexity.

In the Next.js codebase, packages/next/src/build/webpack-config.ts generates the Webpack (or Turbopack) configuration powering both development and production builds. The packages/next/src/client/index.tsx file implements React Fast Refresh and hydration logic, enabling seamless server-to-client transitions.

Vite keeps configuration minimal through vite.config.ts, allowing direct control over Rollup plugins and esbuild targets without ejecting.

CRA abstracts all Webpack configuration inside react-scripts, requiring developers to "eject" if they need custom build modifications.

Quick Start Commands

Generate a new project with each tool using the following commands:

# Vite – minimal React SPA with fast HMR

npx create-vite@latest my-vite-app --template react
cd my-vite-app
npm install
npm run dev  # http://localhost:5173

# Next.js – full-stack framework with TypeScript and App Router

npx create-next-app@latest my-next-app --ts --app
cd my-next-app
npm install
npm run dev  # http://localhost:3000 with SSR support

# Create React App – basic client-side SPA

npx create-react-app my-cra-app
cd my-cra-app
npm start    # http://localhost:3000

Summary

• Choose create-vite@latest when building lightweight single-page applications requiring minimal configuration, ultra-fast Hot Module Replacement (HMR), and full control over the bundler via Rollup plugins.
• Choose create-next-app when developing full-stack applications requiring server-side rendering, API routes, image/font optimizations, or deployment to serverless platforms like Vercel.
• Choose create-react-app only for legacy maintenance or simple prototypes where you need the official React tooling without additional frameworks, though Vite is generally recommended for new SPAs.

Frequently Asked Questions

Can I use Vite for server-side rendering like Next.js?

Vite supports server-side rendering through external plugins, but it is not built-in. You must manually configure SSR entry points and server logic, whereas Next.js provides SSR, SSG, and ISR automatically through its file-system routing architecture implemented in packages/next/src/server/lib/router-server.ts.

Is Create React App deprecated?

While not officially deprecated, Create React App is no longer recommended by the React core team for new applications. The tool lacks modern features like automatic server-side rendering, API routes, and optimized build tools found in Next.js or Vite, making it suitable primarily for legacy maintenance or quick prototypes.

Which tool offers the fastest development server?

Vite generally provides the fastest cold-start and Hot Module Replacement (HMR) times because it serves native ES modules without bundling during development, using esbuild for rapid transforms. Next.js now offers Turbopack (configured in packages/next/src/build/webpack-config.ts) for comparable speed, though Vite remains leaner for pure client-side applications.

Can I migrate from Create React App to Next.js or Vite?

Yes, both migrations are possible. Moving from CRA to Vite typically involves replacing react-scripts with Vite configuration and updating HTML entry points. Migrating to Next.js requires restructuring your routing to use the pages/ or app/ directory conventions and potentially refactoring data fetching to use Next.js server-side methods instead of client-only fetching.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}