WP to Next.js: Complete Migration Guide

Looking to migrate from WP to Next.js? You're making a smart decision. Next.js offers better performance, security, and developer experience than WordPress.

This guide covers everything you need to know about moving from WordPress (WP) to Next.js — and introduces our free migration tool that does it automatically.

Why Migrate from WP to Next.js?

Performance Gains

Metric

WordPress

Next.js

Page Load Time

2-5 seconds

0.3-0.8 seconds

TTFB

800ms-2s

50-150ms

Lighthouse Score

40-60

95-100

Cost Savings

• WordPress Hosting: $10-100/month

• Next.js on Vercel: Free for most sites

Security Benefits

WordPress is the #1 target for hackers (43% of all websites). Next.js static sites have no:

• Database to hack

• Login pages to brute force

• Plugins with vulnerabilities

• PHP exploits

Migration Methods Compared

Option 1: Manual Migration

Time: 10-40 hours

Skill Required: Advanced React/Next.js knowledge

Steps:

1. Export WordPress content via WP-CLI or XML

2. Convert posts to MDX files

3. Create Next.js pages manually

4. Set up routing

5. Configure SEO

6. Deploy

Option 2: Using LeaveWP (Recommended)

Time: 5-10 minutes

Skill Required: None

Steps:

1. Enter your WP site URL

2. Click "Migrate"

3. Download your Next.js project

4. Deploy to Vercel

→ Try LeaveWP Free

What Gets Migrated

When you migrate WP to Next.js with our tool:

• ✅ Content

• All posts and pages

• Custom post types

• Draft and published content

• ✅ SEO

• Meta titles and descriptions

• URL structure (with redirects)

• Open Graph data

• Structured data

• ✅ Media

• Featured images

• In-content images

• Image optimization

• ✅ Taxonomy

• Categories

• Tags

• Custom taxonomies

• ✅ Authors

• Author names

• Author bios

• Author archive pages

Step-by-Step: WP to Next.js Migration

Step 1: Backup Your WP Site

Before migrating, backup your WordPress site:

Using WP-CLI
wp db export backup.sql
wp export generate

Or use a plugin like UpdraftPlus.

Step 2: Run the Migration Tool

1. Go to LeaveWP.com

2. Enter your WordPress site URL

3. Select "Next.js" as destination

4. Click "Start Migration"

Step 3: Download Your Project

The tool generates a complete Next.js project:

my-site/
├── app/
│   ├── page.tsx
│   ├── blog/
│   │   ├── page.tsx
│   │   └── [slug]/
│   │       └── page.tsx
├── content/
│   └── posts/
│       ├── my-first-post.mdx
│       └── another-post.mdx
├── public/
│   └── images/
├── package.json
└── next.config.js

Step 4: Test Locally

npm install
npm run dev

Visit http://localhost:3000 to preview.

Step 5: Deploy to Vercel

npx vercel

Or connect your GitHub repo to Vercel for automatic deployments.

Handling WordPress Features in Next.js

Comments

Replace WordPress comments with:

• Giscus (GitHub-based, free)

• Disqus (popular, free tier)

• Hyvor Talk (privacy-focused)

Contact Forms

Replace Contact Form 7 with:

• Formspree (free tier available)

• ConvertKit (for newsletters)

• Netlify Forms (if on Netlify)

Search

Replace WordPress search with:

• Built-in static search (included in our export)

• Algolia (for larger sites)

• Pagefind (static search, free)

E-commerce

If you're running WooCommerce:

• Shopify (headless mode)

• Snipcart (simple add-to-cart)

• Medusa (open-source)

Common Questions

Will my URLs change?

No. We preserve your exact URL structure. All old URLs work via 301 redirects.

Can I still use WordPress for content?

Yes! You can use WordPress as a headless CMS:

// app/blog/[slug]/page.tsx
async function getPost(slug) {
  const res = await fetch(https://your-wp-site.com/wp-json/wp/v2/posts?slug=${slug});
  return res.json();
}

How do I edit content after migration?

Two options:

1. Edit MDX files directly — Simple text files

2. Use a headless CMS — Payload, Sanity, Contentful

What about my WordPress plugins?

Most plugins have better modern alternatives:

WordPress Plugin

Next.js Alternative

Yoast SEO

Built-in Next.js SEO

WP Rocket

Not needed (static)

Wordfence

Not needed (no attack surface)

Contact Form 7

Formspree

Elementor

React components

Troubleshooting

Issue: Images not loading

Make sure your WordPress site allows CORS for the REST API, or use our "include images" option during export.

Issue: Custom fields missing

If you're using ACF (Advanced Custom Fields), enable the "Include custom fields" option in our tool.

Issue: Some posts missing

Draft posts require authentication. Make sure to either:

• Publish drafts before migrating

• Use our authenticated migration (coming soon)

Conclusion

Migrating from WP to Next.js is one of the best decisions you can make for your website. You'll get:

• 10x faster page loads

• 99% lower attack surface

• $0 hosting costs (on Vercel)

• Better SEO scores

Ready to migrate? Start your free WP to Next.js migration →

---

Related:

• WordPress vs Next.js Comparison

• WordPress Too Slow? The Permanent Fix

• Best WordPress Alternatives