Moving a React single-page app to Next.js without losing search traffic

The short answer

Moving to a server-rendered framework helps search and AI crawlers read your content. It can also wreck your traffic if you change addresses, drop tags or launch a hidden copy by mistake. The rule is simple: change how pages are rendered, not what they say or where they live. Redesigns and new URLs come later.

Why buyers ask this

A single-page app draws its content in the visitor’s browser. People don’t notice, but crawlers may see a nearly empty page. You want the content visible in the HTML. You also have rankings and links you can’t afford to lose. This post is the plan that keeps both.

Before you touch code

1. Record a baseline

You can’t prove you didn’t lose anything without a “before”. Export, and date:

• Search Console clicks and impressions by page and by query, for at least three months.
• Your top landing pages from analytics, and the leads or sales they produced.
• A crawl of the live site: every URL, its title, description, canonical, status code and word count.
• Page speed and Core Web Vitals for your key pages, with the date and device recorded.

If you skip this, you will argue about it later with no data. We haven’t recorded a before-and-after on every rebuild we’ve done, and we say so on our own case study. Don’t repeat it.

2. List every URL

Include pages that rank, pages that earn links, pages in the sitemap and old URLs that already redirect. The migration risk is concentrated in the URLs you forgot.

3. Map old to new

Keep addresses the same wherever possible. Every URL you change is a small bet that the redirect and the search engine will cooperate. Do the redesign, the renames and the tidy-up in a second project.

Choose a rendering strategy per page

Not everything needs to move. A logged-in app can stay a single-page app. Move the pages that are meant to be found.

Carry the search signals across

At launch, the new page should say exactly what the old one said:

• Title and meta description, word for word.
• Canonical tag, absolute, pointing to the preferred address.
• Headings and body text. Don’t “improve” the copy on the same day.
• Structured data, equal to or richer than before.
• Open Graph and social tags.
• Internal links and navigation, as real links a crawler can follow, not click handlers.
• Images, with the same alt text and sensible dimensions to avoid layout shift.
• Sitemap and robots rules. Submit the new sitemap, and check robots doesn’t block anything you want indexed.
• Hreflang if you serve more than one language or region.

Test on a hidden copy

Stage the new site on a separate address and block it from search. Then run three checks on every key page:

1. View the page source (not the inspector). Your headline and first paragraph should be in the raw HTML.
2. Turn JavaScript off and reload. The page should still say what you sell.
3. Compare the crawl of the staging site against your baseline crawl. Every old URL should be accounted for, with titles and canonicals matching.

Then, the check people forget: remove the block on search before launch. A staging “noindex” that reaches production is among the most expensive mistakes in the business. Put it on the launch checklist as its own line, and make a second person confirm.

Launch day

• Deploy at a quiet time, with a person watching.
• Confirm the redirects with a script, not by clicking.
• Check the live robots file and a few pages for stray noindex tags.
• Fetch key URLs as a search engine would and confirm the content is present.
• Submit the sitemap in Search Console.
• Keep the old version deployable. A rollback you haven’t tested isn’t a rollback.

The four weeks after

Some movement is normal. A migration can wobble for a few weeks and recover. A steady slide in one group of pages points at a specific mistake, and your baseline tells you which group.

The mistakes that cost the most

• Changing the URL structure and the framework in the same launch.
• Dropping tags because the new templates didn’t copy them.
• Leaving noindex on after staging.
• Client-side redirects. Use proper server redirects.
• Forgetting old backlinks, so inbound links hit a 404.
• Skipping the baseline, then having no way to tell success from failure.

Next: server-rendered pages and AI search and building an MDX blog engine marketing can run. Case study: rebuilding a React app as a fast Next.js site.