You can move a site from WordPress to Next.js without losing SEO if Google finds the same URLs, the same content and the same signals on launch day, only served faster. Rankings drop when URLs break, titles change or pages disappear, not because the stack changed. The work is a URL inventory, a redirect map and a launch checklist, all done before the new site goes live.
I have done this twice in ways I can point to: rebuilding procol.ai from WordPress and Bricks Builder to Next.js, and moving my own portfolio, mohitgoyal.in, off WordPress onto a server-rendered React app.
Why do rankings drop after a migration?
Almost always for one of these reasons:
- Old URLs return 404. Every link and ranking pointing at them is lost.
- Titles and meta descriptions change because nobody copied them from the SEO plugin.
- Content is cut in the redesign, so pages that ranked for a topic no longer cover it.
- Structured data disappears because a plugin used to generate it.
- Content renders in the browser only, so crawlers get a thin HTML shell.
- Staging gets indexed, or the live site ships with a leftover noindex tag.
Each one is preventable. None of them is caused by Next.js itself.
How do you build a complete list of old URLs?
Collect URLs from every source, because each one misses something:
- The XML sitemap from Yoast or Rank Math.
- Google Search Console, the Pages and Performance reports. Any URL with impressions matters.
- A full crawl of the live site, to catch pages missing from the sitemap.
- Analytics landing pages, for URLs that get traffic from campaigns or email.
- Backlink reports, for old URLs other sites still link to.
Merge them into one spreadsheet with a column for the new URL. On mohitgoyal.in I took every legacy WordPress URL from Search Console and gave each one a 301 redirect, so old links and rankings land on the right new page.
How should you map and redirect old URLs?
Keep URLs identical wherever you can. Where you cannot, redirect each old URL to its closest equivalent with a permanent 301.
| Old WordPress URL | New Next.js URL | What to do |
|---|---|---|
/about-us/ | /about | 301 to the new page |
/2023/05/post-name/ | /blog/post-name | 301, or keep the old pattern |
/category/news/ | /blog | 301 to the closest listing |
| A page you are dropping | The most relevant remaining page | 301, never a blanket redirect to the homepage |
/wp-content/uploads/... images | New image URLs | 301 the ones with backlinks or image traffic |
Two details catch people out:
- Trailing slashes. WordPress adds them by default and Next.js does not. Pick one form and redirect the other, or you split signals between two versions of every page.
- Redirect chains. If an old URL already redirected once on WordPress, point it straight at the final new URL.
In Next.js, a fixed list goes in the redirects() function in the config file, and pattern-based rules can live in middleware. On this site there is also a last-resort rule: any unknown old post URL under /blog/ 301s to the blog index instead of showing a 404. That is a safety net, not a substitute for mapping each URL.
What has to carry over besides the URLs?
| Signal | Where it lived on WordPress | Where it lives in Next.js |
|---|---|---|
| Title tag and meta description | Yoast or Rank Math fields | Page metadata, generated per route |
| One H1 per page | Theme or builder heading | The page component |
| Body content and internal links | Post editor | Content source or components |
| Image alt text | Media library | Image components |
| Canonical URL | SEO plugin | Page metadata |
| Structured data | SEO plugin | JSON-LD you output yourself |
| XML sitemap | SEO plugin | A generated sitemap route |
| Open Graph tags | SEO plugin | Page metadata |
On procol.ai I set up structured data, generated sitemaps, canonical URLs and image optimisation as part of the rebuild. The structured data and sitemaps are generated from the same content the pages render, so they cannot drift out of sync. On mohitgoyal.in each page carries its own JSON-LD (Person, CreativeWork, BreadcrumbList and ItemList), and the site generates a sitemap and an llms.txt file for answer engines.
For the full list of what a Next.js site needs, see my technical SEO checklist for Next.js.
How do you make sure Google can read the new pages?
Server-render them. Every page on procol.ai is server rendered, so the HTML arrives complete instead of waiting on a JavaScript bundle. Check it yourself:
- Open View Source on a few key pages. The headline and body copy should be in the HTML.
- Run the URL Inspection tool in Search Console on the staging URL, if it is reachable, or right after launch.
- Run the Rich Results Test to confirm the structured data parses.
How do you launch without a gap?
The lesson I took from procol.ai is that a rebuild succeeds or fails on the handover period. While the new site took shape, I kept the existing WordPress and Bricks site stable and kept shipping fixes and campaign pages on it. The company's main channel was never unavailable for a day.
- 1
Freeze content
Agree a date after which nothing new is published on the old site, or copy late changes across by hand.
- 2
Final crawl
Crawl the old site one last time and update the redirect map with anything new.
- 3
Deploy and switch
Put the Next.js site live and point the domain at it. Remove any staging noindex rules.
- 4
Test every redirect
Request each old URL from the map and check it returns a single 301 to the right page.
- 5
Submit the sitemap
Submit the new sitemap in Search Console and request indexing for the most important pages.
What should you watch after launch?
- Search Console Pages report, for new 404s and pages dropped from the index. Add a redirect for every real 404.
- Performance report, comparing clicks and impressions for your top pages before and after.
- Core Web Vitals, which should improve. If they do not, look at images and third-party scripts first.
Keep the redirects permanently. They cost nothing and protect links you have earned over years.
If you are planning a move and want a second pair of eyes on the redirect map, I do this as part of my Next.js and React websites and technical SEO work.
