Create React App to Next.js migration: cost and SEO

A Create React App (CRA) to Next.js migration usually costs $8,000 to $15,000 at a specialist agency for anything from a 10 to 15 route SPA up to a larger app with auth and many APIs, and takes 6 to 14 weeks, going by Social Animal's published pricing. Large products with complex auth and data layers can cost a lot more. Most of your React components move over unchanged. The money goes on routing, data fetching, per-page metadata and the SEO work that keeps your URLs and Google rankings. And if your app sits behind a login and doesn't need Google at all, moving to Vite is cheaper and probably the better call.

Below: what moves and what gets rebuilt, market price ranges with a source for each, the timeline, and how to get through the migration with your rankings intact.

Why move off Create React App now?

Because it's deprecated. On February 14, 2025 the React team deprecated Create React App for new apps and asked existing apps to move to a framework or to a build tool like Vite, Parcel or Rsbuild. CRA is now in maintenance mode. There's a version that works with React 19, but no new features are coming.

Your app won't break tomorrow. The risk is slower than that. react-scripts falls further behind, security warnings pile up, and the upgrade you'll eventually have to do keeps getting bigger. If you're going to move anyway, I'd much rather do it as a planned project than as an emergency when something finally stops building.

Should you migrate to Next.js or to Vite?

Go with Next.js if public pages need to rank on Google or get cited by AI search. Go with Vite if the app sits behind a login and search traffic doesn't matter. Plenty of CRA apps don't need Next.js at all. This is how I'd decide:

Still unsure? The Tech Stack Advisor gives you a layer-by-layer recommendation, with the trade-offs, in a couple of minutes.

What moves over and what has to be rebuilt?

Components, hooks and CSS come across almost unchanged. Routing, data fetching, metadata, auth and browser-only code get rebuilt. The official Next.js migration guide starts with a trick I like: you load the whole CRA app inside one catch-all route with server rendering switched off, so it runs on Next.js in SPA mode from day one. Then you convert routes one at a time, and the project stays shippable the whole way through. SPA mode on its own doesn't fix SEO, though. It's only the starting point.

The surprises usually come from browser-only libraries: maps, charts, rich text editors, older analytics snippets. They all work in Next.js, but each one has to be loaded on the client only, and tracking them all down takes time.

How much does a Create React App to Next.js migration cost?

At a fixed-price agency, $8,000 to $15,000 for a 10 to 15 route SPA up to a larger app with auth and many APIs. Enterprise modernisation ranges go from $20,000 to $500,000+. That range covers enterprise-scale modernisation and isn't representative of a typical small business CRA app. Freelance Next.js rates run from about $20 to $150+ an hour, depending on experience and region. Very few providers publish prices for this kind of work, so these are the ranges I could actually verify:

The spread is wide because no two CRA apps are built the same way. Here's what moves the price:

• Route count, and how many routes are public. Logged-in pages can stay client-rendered. Public pages need server rendering and their own metadata.
• Data layer. One REST API is simple. Several APIs, GraphQL or a big Redux store take longer.
• Auth. Moving from client-side route guards to server-side checks is often the biggest single task.
• Content. If marketing copy is hard-coded in JSX and your team wants to edit it themselves, you'll need a CMS as well. Pairing Next.js with headless WordPress is one option.
• SEO scope. Redirects, metadata, structured data, sitemaps and Search Console checks. This is where cheap quotes cut corners.
• Hosting. A CRA build is just static files and often hosts for nothing. A server-rendered Next.js app on Vercel Pro starts at $20 per seat per month plus usage.

How long does the migration take?

Usually 6 to 14 weeks, and about 8 weeks for a 20-route app, according to Social Animal. Software Modernization Services puts React SPA to Next.js work at 4 to 12 weeks. The order you do things in matters more than the total:

1. 1

   Audit the codebase

   List every route, data source, auth rule and browser-only library, and export every URL Google knows about.

2. 2

   Run the app in SPA mode

   Load the CRA app inside a Next.js catch-all route so it works on Next.js from day one.

3. 3

   Convert public routes first

   Move the pages that earn search traffic to server or static rendering, each with its own metadata.

4. 4

   Add redirects, sitemap and schema

   Map every changed URL to a permanent redirect and generate a sitemap from the real routes.

5. 5

   Crawl staging, then launch

   Crawl the staging site, compare it with the old URL list, then switch DNS.

6. 6

   Monitor for four weeks

   Watch the Search Console Pages report, 404s and Core Web Vitals, and fix gaps quickly.

Why isn't my React app showing on Google?

Because a CRA site sends crawlers an empty HTML shell. Every route gets the same title and description, and the content only appears after JavaScript runs. This is often what actually starts the migration conversation. Every visitor, human or bot, gets the same index.html: an empty <div id="root"> and one title for the whole site.

Google can run JavaScript. But its JavaScript SEO guide describes crawling, rendering and indexing as separate phases, and pages wait in a queue to be rendered. Google recommends server-side rendering, static rendering or hydration. It calls dynamic rendering (serving bots a pre-rendered copy) "a workaround and not a long-term solution". And many AI crawlers don't render JavaScript at all, as Vercel's analysis of AI crawler traffic found. To them, a CRA page is close to blank.

CRA sites tend to have a few other SEO problems too:

• Soft 404s. Static hosts set up for SPAs return a 200 status for every URL, including ones that don't exist.
• Duplicate titles and descriptions on every route, unless someone set up react-helmet carefully.
• Hash routes like /#/pricing, which Google doesn't treat as separate pages.

Next.js fixes all of these. Pages arrive as HTML, each route has its own metadata, missing pages return a real 404, and you can build the sitemap straight from your routes. I built my own portfolio on TanStack Start with server rendering for the same reason: crawlers that don't run JavaScript can still read every page. If your pages show up as "Crawled – currently not indexed" in Search Console, client-side rendering is a likely suspect.

How do you keep URLs and rankings in a Create React App to Next.js migration?

Keep your existing paths, send every changed URL to a 308 permanent redirect, catch hash routes with a small client-side script, and carry over the metadata that already ranks. When traffic drops after a migration, it's almost always URLs that changed with no redirect. Next.js isn't the problem. Here's the checklist:

1. Keep the same paths where you can. If your React Router paths were clean (/pricing, /blog/my-post), Next.js file routes can match them exactly and you won't need a redirect at all.
2. Export every known URL. Pull from your sitemap, the Search Console Pages report, landing pages in analytics, and any pages with backlinks.
3. Map changes to permanent redirects. Paste your old and new URL pairs into the Redirect Map Builder. It gives you a redirects() array for next.config.js and flags chains, loops, duplicates, trailing slashes and query strings before they go live. Next.js serves permanent: true redirects as 308s.
4. Handle hash routes in the browser. The server never sees anything after the #, so next.config.js can't redirect /#/pricing. Add a small script on the home page that reads location.hash and sends the visitor to the real path.
5. Match trailing slashes. Next.js drops the trailing slash by default. If your old host served /about/, set trailingSlash to match, or redirect consistently.
6. Carry over metadata. Keep the titles, descriptions, canonicals and structured data that already rank. My Next.js technical SEO checklist has the full list.

If traffic has already dropped after a rebuild, start by crawling your old URL list and checking which URLs now return a 404 instead of redirecting. My guide to recovering from a traffic drop after a redesign covers the rest.

What should you ask a developer before you hire?

Ask about rendering, auth, redirects and what happens after launch. Those four things decide whether a Next.js migration keeps your traffic. I'd ask:

• Will you convert public routes to server or static rendering, or just wrap the app in SPA mode?
• How will you handle auth, and which pages stay client-side?
• Will you deliver a full redirect map, including hash routes and trailing slashes?
• How will you check that each page has its own title, description and canonical?
• Which host do you recommend, and what will it cost per month at our traffic?
• Who watches Search Console after launch, and for how long?

If a developer can't give you a straight answer on redirects and rendering, the price doesn't matter much. You'll pay for the mistakes later, in lost traffic.

What to do next

Pull together repo access (or a list of routes) and a URL export from Search Console. With those two things, any developer can give you a real quote instead of a guess. I build and migrate Next.js and React websites and do the technical SEO and Core Web Vitals work too, so one person owns both the migration and the redirects. Tell me about your app and I'll tell you whether Next.js or Vite makes more sense, what to expect, and which routes I'd convert first.