How to Migrate WordPress to Next.js Without Losing SEO

Step 1

Audit Your WordPress Site

Crawl every URL using Screaming Frog or Sitebulb. Export a complete spreadsheet of all URLs with their title tags, meta descriptions, H1s, canonical URLs, and HTTP status codes. This document becomes your SEO bible for the migration. Every page that returns a 200 status on WordPress must either return a 200 at the same URL in Next.js or receive a 301 redirect to the correct new URL.

Also pull your top pages from Google Search Console sorted by clicks. These get the most scrutiny during QA. A broken redirect on your top landing page can cost you significant traffic.

Step 2

Export Your WordPress Content

Go to WordPress Admin → Tools → Export → All Content. Download the XML file: it contains every post, page, category, tag, and custom field. For images, download your full wp-content/uploads folder via FTP or your host's file manager.

Before importing images into Next.js, convert them to WebP format and compress them to under 150KB where possible. Tools like Squoosh or ImageOptim work well for batch conversion. Next.js's next/image component will handle responsive sizing automatically, but starting with well-optimised source images gives you the best PageSpeed baseline.

Step 3

Set Up Your Next.js Project

Scaffold your project with npx create-next-app@latest --typescript. Install Tailwind CSS for styling. Deploy an empty shell to Vercel immediately. This sets up your CI/CD pipeline so every commit deploys automatically. You will use preview URLs for QA throughout the build.

If you need a content management interface for blog posts or frequently updated pages, set up a headless CMS at this stage. Sanity is our recommendation. It has a clean editing UI similar to WordPress's Gutenberg editor, and the free tier supports most business sites. Contentful is a solid alternative for larger content libraries.

Step 4

Build Your Pages and Migrate Content

Build each page as a React Server Component in Next.js. Replicate your navigation structure, internal linking, and page hierarchy exactly. Import your WordPress XML content into your CMS or convert blog posts to MDX files. Use next/image for every image: this automatically serves WebP, handles lazy loading, and generates responsive sizes.

For each WordPress plugin, implement the equivalent native solution:

• ✓
  Contact Form 7 / Gravity Forms → API route + Resend or Nodemailer
• ✓
  Yoast SEO → Next.js metadata API + JSON-LD schema in each page
• ✓
  Google Analytics → next/script with lazyOnload strategy
• ✓
  WooCommerce → Shopify headless or custom Stripe integration
• ✓
  Social sharing buttons → lightweight custom component (no plugin needed)

Step 5. Critical

Set Up 301 Redirects

This step is non-negotiable for SEO preservation. Every URL that changes between your WordPress site and your Next.js site needs a 301 redirect. In next.config.js, add a redirects array:

async redirects() {
  return [
    {
      source: '/old-wordpress-slug',
      destination: '/new-nextjs-path',
      permanent: true, // 301
    },
  ]
}

Common URL changes that need redirects: WordPress often adds /category/ prefixes to blog archives, date-based post URLs (/2024/03/post-name), and tag pages. If you are simplifying your URL structure in Next.js, every old URL needs a redirect to its new equivalent.

Step 6

Migrate All SEO Metadata

Transfer every title tag, meta description, Open Graph tag, and canonical URL from WordPress (via Yoast or RankMath) to Next.js. In Next.js 14+, use the metadata API in each page.tsx:

export const metadata = {
  title: "Your Page Title",
  description: "Your meta description",
  alternates: { canonical: "https://yoursite.com/page" },
  openGraph: { title, description, type: "website" },
}

Add JSON-LD schema markup that Yoast was previously generating. At minimum: Organization, WebSite, BreadcrumbList, and WebPage on every page. Article schema on every blog post. This schema is now inline in your page rather than generated by a plugin: it is more reliable and Google processes it faster.

Generate a new sitemap.xml using the next-sitemap package. Configure it to include all your pages and exclude any admin or API routes.

Step 7

QA and Pre-Launch Testing

Do not go live until all of these pass:

• ✓
  PageSpeed Mobile score above 90 on your top 5 pages. Run on the Vercel preview URL
• ✓
  Every 301 redirect tested and returning correct destination URLs
• ✓
  All forms submitting correctly with confirmation emails firing
• ✓
  All images loading with correct alt text and dimensions
• ✓
  Google's Rich Results Test passing on key schema pages
• ✓
  sitemap.xml rendering all expected URLs at /sitemap.xml
• ✓
  robots.txt configured correctly (disallow /api/ paths, allow everything else)
• ✓
  No console errors in Chrome DevTools on any page
• ✓
  Mobile layout tested on actual devices (not just browser devtools)

This QA phase typically takes 1 to 2 days for a standard business site. Do not rush it. A broken form or missing redirect discovered after launch costs more time and SEO equity to fix than finding it in QA.

Step 8

DNS Cutover and Post-Launch Monitoring

When QA is complete and everything passes, update your domain DNS to point to Vercel. In your domain registrar, update the A record to Vercel's IP or add a CNAME pointing to your Vercel project URL. Vercel provisions an SSL certificate automatically within minutes.

Immediately after DNS propagates and your new site is live:

• ✓
  Submit your new sitemap.xml in Google Search Console → Sitemaps
• ✓
  Use Google Search Console's URL Inspection tool to request indexing on your top 10 pages
• ✓
  Verify your old WordPress site is fully offline or returning 301s (not serving duplicate content)
• ✓
  Check that Googlebot can access your new site via Search Console's Coverage report
• ✓
  Monitor Search Console daily for crawl errors in the first 2 weeks

Rankings may fluctuate in the first 2 to 4 weeks as Google re-crawls and re-evaluates your pages. This is normal. By weeks 4 to 8, your Core Web Vitals field data begins updating in Search Console with real user data from the faster Next.js site. That is when ranking improvements typically start appearing.