Migrating From Create React App to Vite or Next.js: A Practical Decision Guide

Create React App is effectively dead. No meaningful updates since early 2023. Dependencies are outdated. Build times are slow. The React team recommends alternatives. If you are still on CRA: migration is not optional anymore — it is overdue.

The question is: migrate to what? Vite (fast build tool, SPA architecture preserved) or Next.js (full framework with server rendering, routing, and more)? The answer depends on your application.

Vite: The Direct Replacement

Vite replaces CRA's build tooling (webpack) with a faster alternative (esbuild + Rollup). Your application structure stays the same: a client-side SPA. No server components, no file-based routing, no SSR (unless you add it).

Choose Vite when: your app is a dashboard or internal tool (SPA is appropriate, SEO does not matter), you want minimal migration effort (closest to a drop-in replacement), you do not need server-side rendering, and your team wants to stay with client-side React patterns.

Migration effort: typically 1-3 days for a medium application. Replace CRA config with Vite config. Update imports (Vite uses ESM). Adjust environment variable prefixes (REACT_APP_ → VITE_). Fix any webpack-specific code.

Next.js: The Framework Upgrade

Next.js is not just a build tool replacement. It is a full framework: file-based routing, server components, API routes, middleware, and optimized production deployment.

Choose Next.js when: SEO matters (server-side rendering, metadata, sitemaps), you want file-based routing (instead of react-router configuration), you are building a full-stack application (API routes alongside frontend), you want React Server Components (zero-JS server rendering for content), and your application will grow significantly (Next.js scales better for large applications).

Migration effort: 2-4 weeks for a medium application. The architecture changes significantly: routing, data fetching, component structure, and deployment all differ from CRA.

The Migration Decision

Ask these questions:

Is this an internal tool or dashboard? → Vite (SPA is fine, minimal migration effort).

Does SEO matter for this application? → Next.js (SSR for search indexability).

Are you building new features actively? → Next.js (invest in a better architecture for future development).

Are you in maintenance mode? → Vite (minimum effort, keep it working).

Do you need API routes alongside the frontend? → Next.js (co-located frontend and backend).

Migrating to Vite: Step by Step

Step 1: Install Vite and configure. Create vite.config.ts with the React plugin. Remove react-scripts from dependencies. Update package.json scripts: dev uses vite, build uses vite build.

Step 2: Move index.html. In CRA: index.html is in public/. In Vite: index.html is at the project root. Update the HTML to include a script tag pointing to your entry file.

Step 3: Update environment variables. CRA uses REACT_APP_ prefix. Vite uses VITE_ prefix. Find-and-replace across the codebase.

Step 4: Fix imports. Vite requires explicit file extensions for non-JavaScript imports. SVG imports change (use ?react suffix or a plugin). CSS module imports remain the same.

Step 5: Update dependencies. Remove react-scripts (and its transitive dependencies — significant size reduction). Add Vite and plugins.

Step 6: Verify build. Run vite build. Fix any remaining issues (usually: import paths, environment variables, or asset handling differences).

Common issues: proxy configuration (CRA uses package.json proxy field — Vite uses server.proxy in config), testing (if using CRA's built-in test setup — switch to Vitest), and absolute imports (CRA supports src/ prefix — Vite needs explicit path aliases).

Migrating to Next.js: Key Decisions

Decision 1: App Router or Pages Router? For new migrations in 2026: App Router. It is the stable, recommended approach with Server Components, streaming, and modern patterns.

Decision 2: What becomes a Server Component vs Client Component? Content that does not need interactivity (text, images, static data): Server Component. Interactive elements (forms, buttons with state, animations): Client Component. Most pages will be a mix.

Decision 3: Data fetching migration. CRA applications typically fetch data in useEffect. Next.js App Router: fetch data directly in Server Components (no useEffect needed for server data). Client Components still use useEffect or libraries like SWR/TanStack Query.

The Routing Migration

CRA typically uses react-router. Next.js uses file-based routing. Every route needs a corresponding file in the app/ directory.

CRA route: } />

Next.js: app/tools/[id]/page.tsx (file creates the route automatically).

The migration: create files for each route. Move component code into the page files. Replace react-router hooks (useNavigate → useRouter, useParams → route params).

This is the most time-consuming part of migration: restructuring the file system and adjusting routing patterns.

Handling Client-Side State

CRA applications often have heavy client-side state (Redux, Context, state management). In Next.js App Router: Server Components cannot use hooks or client state.

Pattern: keep state management in Client Components. Create a "use client" wrapper for stateful sections. Server Components handle data fetching and static rendering. Client Components handle interactivity.

Deployment Changes

CRA builds to static files (deploy anywhere: S3, Netlify, any static host). Next.js (with SSR) needs a Node.js server or a compatible platform (Vercel, Netlify, Railway).

If you need static-only deployment: Next.js supports static export (output: 'export' in next.config). This produces static files like CRA but you lose SSR/ISR capabilities.

Testing Migration

CRA uses Jest with React Testing Library (via react-scripts). After migration:

Vite: switch to Vitest (Jest-compatible API, much faster, native ESM). Most tests work with minimal changes.

Next.js: Jest still works (with appropriate configuration for Server Components). Or switch to Vitest.

The Timeline

Vite migration: 1-3 days (small/medium app), 1-2 weeks (large app with complex webpack config).

Next.js migration: 2-4 weeks (medium app), 1-2 months (large app with complex routing and data fetching).

Start the migration now. CRA's unmaintained state means: security vulnerabilities will not be patched, build performance will not improve, and the gap between CRA's capabilities and modern tooling grows daily. The longer you wait: the harder migration becomes (more code accumulates on the old foundation).