Complete WordPress to Next.js Migration Guide [2026]

Are you ready to leave WordPress behind and embrace the modern web? In this comprehensive guide, we'll walk through every step of migrating your WordPress site to Next.js.

By the end of this guide, you'll have:

• ✅ All your content exported as MDX files

• ✅ A blazing-fast Next.js site ready to deploy

• ✅ Better SEO with perfect Core Web Vitals

• ✅ 90% lower hosting costs

Let's get started!

---

Table of Contents

1. Why Migrate from WordPress to Next.js?

2. Prerequisites

3. Step 1: Export Your WordPress Content

4. Step 2: Set Up Your Next.js Project

5. Step 3: Configure MDX

6. Step 4: Create Blog Components

7. Step 5: Build the Blog Pages

8. Step 6: Add SEO & Metadata

9. Step 7: Deploy to Vercel

10. Bonus: Preserve SEO Rankings

---

Why Migrate from WordPress to Next.js? {#why-migrate}

Before we dive in, let's understand why so many developers are making this switch:

Performance

Metric

WordPress

Next.js

Time to First Byte

500-2000ms

50-100ms

Largest Contentful Paint

2-4s

0.5-1s

Page Size

2-5MB

100-300KB

Next.js sites are 10-20x faster than typical WordPress sites.

Security

WordPress powers 43% of the web, making it the #1 target for hackers. With Next.js static sites:

• No database to hack

• No PHP vulnerabilities

• No plugin security holes

• No server to compromise

Cost

Expense

WordPress

Next.js

Hosting

$20-100/mo

$0-20/mo

Security plugins

$50-200/yr

$0

Performance plugins

$50-100/yr

$0

Maintenance

Hours/month

Minutes/month

Most teams save 80-90% on hosting costs.

Developer Experience

• Write content in Markdown/MDX

• Use React components

• TypeScript support

• Git-based workflow

• Local development without Docker

---

Prerequisites {#prerequisites}

Before starting, make sure you have:

• Node.js 18+ installed

• npm or pnpm

• A WordPress site with public REST API access

• Git (recommended)

• A Vercel account (free)

---

Step 1: Export Your WordPress Content {#step-1-export}

Option A: Use LeaveWP (Recommended)

The easiest way to export your WordPress content is with our free tool:

1. Go to leavewp.com

2. Enter your WordPress site URL

3. Select "Complete Next.js Site" as destination

4. Click "Start Migration"

5. Download your complete project

That's it! You'll get a ready-to-deploy Next.js project with all your content.

Option B: Manual Export via REST API

If you prefer manual control, you can fetch content from the WordPress REST API:

// lib/wordpress.ts
const WP_URL = 'https://your-wordpress-site.com';

export async function getPosts() {
  const response = await fetch(
    ${WP_URL}/wp-json/wp/v2/posts?per_page=100&_embed
  );
  return response.json();
}

export async function getPages() {
  const response = await fetch(
    ${WP_URL}/wp-json/wp/v2/pages?per_page=100&_embed
  );
  return response.json();
}

Then convert the JSON to MDX files with frontmatter.

---

Step 2: Set Up Your Next.js Project {#step-2-setup}

If you used LeaveWP, skip this step—your project is already set up!

Otherwise, create a new Next.js project:

npx create-next-app@latest my-blog --typescript --tailwind --app
cd my-blog

---

Step 3: Configure MDX {#step-3-mdx}

Install MDX dependencies:

npm install @next/mdx @mdx-js/loader @mdx-js/react gray-matter reading-time

Update next.config.mjs:

import createMDX from '@next/mdx';

const nextConfig = {
  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
};

const withMDX = createMDX({
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
});

export default withMDX(nextConfig);

---

Step 4: Create Blog Components {#step-4-components}

Create reusable components for your blog:

// components/PostCard.tsx
import Link from 'next/link';

interface PostCardProps {
  title: string;
  excerpt: string;
  slug: string;
  date: string;
}

export function PostCard({ title, excerpt, slug, date }: PostCardProps) {
  return (
    

      /blog/${slug}}>
        
{title}

        
{excerpt}

        {date}
      
    

  );
}

---

Step 5: Build the Blog Pages {#step-5-pages}

Create the blog listing page:

// app/blog/page.tsx
import { getAllPosts } from '@/lib/posts';
import { PostCard } from '@/components/PostCard';

export default async function BlogPage() {
  const posts = await getAllPosts();
  
  return (
    

      
Blog

      

        {posts.map((post) => (
          
        ))}
      

    

  );
}

---

Step 6: Add SEO & Metadata {#step-6-seo}

Add metadata to your pages:

// app/blog/[slug]/page.tsx
import { Metadata } from 'next';

export async function generateMetadata({ params }): Promise {
  const post = await getPost(params.slug);
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: 'article',
      publishedTime: post.date,
    },
  };
}

---

Step 7: Deploy to Vercel {#step-7-deploy}

Deploying to Vercel is the easiest option:

Install Vercel CLI
npm i -g vercel

Deploy
vercel

Or push to GitHub and connect to Vercel for automatic deployments.

---

Bonus: Preserve SEO Rankings {#bonus-seo}

To maintain your search rankings:

1. Set Up Redirects

Create a vercel.json or next.config.mjs with redirects:

// next.config.mjs
const nextConfig = {
  async redirects() {
    return [
      // Redirect old WordPress URLs to new structure
      {
        source: '/:year/:month/:day/:slug',
        destination: '/blog/:slug',
        permanent: true,
      },
    ];
  },
};

2. Submit Updated Sitemap

1. Generate a new sitemap (Next.js can do this automatically)

2. Submit to Google Search Console

3. Monitor for crawl errors

3. Keep the Same URL Structure (If Possible)

The best approach is to maintain your existing URL structure. If your WordPress posts were at /blog/post-name, keep them there in Next.js.

---

Conclusion

Migrating from WordPress to Next.js might seem daunting, but with the right tools it's actually straightforward:

1. Export content with LeaveWP

2. Review the generated Next.js project

3. Customize the design to your liking

4. Deploy to Vercel

The result? A faster, more secure, and cheaper-to-run website.

Ready to migrate? Start your free migration now →

---

FAQ

Q: Will I lose my SEO rankings?

Not if you set up proper redirects and maintain your URL structure. Many sites actually see improved rankings due to better Core Web Vitals.

Q: Can I still use WordPress for content editing?

Yes! You can use WordPress as a headless CMS, or try tools like Contentlayer, Keystatic, or Sanity for a better editing experience.

Q: How long does migration take?

With LeaveWP: 5-15 minutes. Manually: 1-2 days for a typical blog.