Move a Create React App or Vite React app to Next.js—routing, data fetching, and deployment in steps.
Migrating an existing React app to Next.js unlocks SSR, static generation, and a simpler deployment story. Here’s how to do it in stages.
Migrating React to Next.js
Why migrate
SSR and SSG — Better SEO and first load. Next.js handles data fetching and HTML on the server.
File-based routing — No manual router config; pages map to files under app/ or pages/.
API routes — Backend endpoints in the same repo. Good for BFF or small APIs.
Vercel (or self-host) — One-command deploy with previews and edge.
Steps
Create a Next.js app — Use create-next-app. Choose App Router for new apps.
Move components — Copy or move React components. Add "use client" where you use hooks or browser APIs.
Replace routing — Map each route to a folder under app/ (e.g. app/blog/[slug]/page.js). Replace Link and useRouter with Next.js equivalents.
Data fetching — Replace client-only fetch with server components or getServerSideProps/getStaticProps (Pages) or async server components (App). Use fetch or your data layer on the server.
Env and config — Move env vars to .env.local; use NEXT_PUBLIC_ for client-exposed vars. Adjust build and output in next.config.js.
Deploy — Connect the repo to Vercel or run next build && next start elsewhere.
Migration effort (typical):
Migration effort by app size (weeks)
A practical migration walkthrough:
Takeaway
Migrate incrementally: routing first, then data fetching, then optimizations. Run both old and new in parallel if needed. Next.js is still React—most of your components can move with minimal changes.
