Migrating from Create React App (CRA) to Vite or Next.js: A Step-by-Step Guide

Introduction

Create React App (CRA) is being phased out in favor of modern, high-performance alternatives like Vite and Next.js. If you’re currently using CRA, migrating to one of these tools can significantly improve development speed and application performance. This guide provides a step-by-step process to transition from CRA to either Vite or Next.js.

Why Migrate from CRA?

• Faster Development: Vite and Next.js provide superior Hot Module Replacement (HMR) and significantly reduced startup times.
• Optimized Build Performance: CRA uses Webpack, which is slower compared to modern bundlers like esbuild (used by Vite) and Rust-based tools (used by Next.js for production builds).
• Improved Code Splitting: Next.js offers automatic code splitting and better optimization for large-scale applications.
• Native TypeScript and CSS Module Support: Both Vite and Next.js provide improved handling for TypeScript, CSS modules, and PostCSS.

Migrating to Vite

Vite is an excellent alternative for CRA users looking to keep a client-side rendered (CSR) setup. It offers lightning-fast builds and minimal configuration.

1. Create a New Vite Project

npm create vite@latest my-app --template react
cd my-app
npm install

2. Copy Over Source Code

• Move the src/ directory from your CRA project to the new Vite project.
• Move assets from the public/ folder to the new Vite public/ folder.

3. Update Environment Variables

CRA uses REACT_APP_ as a prefix for environment variables, while Vite uses VITE_.

Rename .env variables:

REACT_APP_API_KEY=xyz → VITE_API_KEY=xyz

4. Update Package.json Scripts

Replace CRA scripts with Vite equivalents:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  }
}

5. Adjust Imports and Dependencies

• If using absolute imports (@/components), configure vite.config.js:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
});

Remove react-scripts and install missing dependencies if needed:

npm uninstall react-scripts npm install @vitejs/plugin-react

6. Run and Test the Project

npm run dev

Migrating to Next.js

Next.js is a powerful React framework offering features like SSR, static site generation (SSG), and API routes.

1. Create a New Next.js Project

npx create-next-app@latest my-app
cd my-app
npm install

2. Move Components and Pages

• Copy the src/ directory contents from CRA into pages/ and components/ in Next.js.
• If using React Router (react-router-dom), remove it, as Next.js uses file-based routing.

3. Convert index.js to a Next.js Page

Replace CRA’s index.js with a Next.js page:

export default function Home() {
  return <h1>Welcome to Next.js</h1>;
}

4. Handle Static and API Routes

• Move static assets to public/.
• Convert existing API endpoints to Next.js API routes inside pages/api/.

5. Update Scripts in package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

6. Test the Next.js App

npm run dev

Conclusion

Migrating from Create React App to Vite or Next.js provides significant performance improvements and modern development features. Vite is best suited for projects that require fast builds and client-side rendering, while Next.js is ideal for applications requiring SSR, SSG, and optimized production performance.