I've migrated somewhere around fifteen sites from Webflow to Next.js over the past three years. Some went flawlessly. A couple were painful. One was a genuine disaster where a client lost 40% of their organic traffic for six weeks because we missed a batch of redirect rules buried in Webflow's CMS collection pages. That experience taught me more about SEO preservation during migrations than any documentation ever could.

Here's everything I know about getting this right -- the technical steps, the gotchas nobody warns you about, and the exact process we use at Social Animal to make sure search rankings survive the transition.

Table of Contents

Why Leave Webflow for Next.js

Let me be clear: Webflow is genuinely good at what it does. It generates clean semantic HTML, handles meta tags natively, auto-generates XML sitemaps, and manages robots.txt without you touching a config file. For a marketing site that doesn't need much custom logic, it's excellent.

But you're reading this article, which means you've probably hit the wall. Here's what typically pushes teams toward Next.js:

Performance ceilings. Webflow sites with heavy interactions, lots of CMS items, or complex animations start showing cracks in Core Web Vitals. We've seen Webflow sites with Largest Contentful Paint (LCP) times above 4 seconds on mobile -- well past Google's 2.5-second threshold. A properly built Next.js site with server-side rendering and next/image optimization typically cuts that in half.

Customization limits. Need to integrate a headless CMS like Sanity or Contentful? Want to build a custom checkout flow? Need middleware for A/B testing at the edge? Webflow's walled garden starts feeling very small.

Cost at scale. Webflow's CMS plan runs $29/month for a single site, but enterprise features push that to $49+/month. When you factor in multiple sites or localization needs, hosting a Next.js app on Vercel's Pro plan at $20/month starts looking smart -- especially since you get edge functions, analytics, and preview deployments included.

The performance data backs this up. Webflow's own engineering team documented a 20% improvement in load times when they migrated their dashboard to Next.js with SSR. In 2025 benchmarks, Next.js 15 sites using the App Router consistently score 15-25% higher on Lighthouse than equivalent Webflow builds with complex interactions.

If you're interested in what's possible with a modern Next.js stack, we break down our approach on our Next.js development capabilities page.

The Real Cost of Migration

Let's talk money before we talk code. I've seen too many teams start a migration without understanding the full investment.

Component Estimated Cost Notes
Webflow export & content audit $1,000 – $3,000 Manual work; Webflow export misses CMS data
Next.js development (10-20 pages) $8,000 – $25,000 Depends on complexity, interactions, integrations
Next.js development (20-50 pages) $20,000 – $60,000 Enterprise sites with CMS, auth, custom logic
Headless CMS setup $2,000 – $8,000 Sanity, Contentful, or Payload CMS configuration
SEO redirect mapping & QA $1,500 – $4,000 The most important line item on this list
Vercel/Netlify hosting (monthly) $20 – $150/mo Replaces Webflow's $29-$49/mo hosting
Post-migration monitoring $500 – $2,000 4-8 weeks of Search Console monitoring

For a typical mid-size marketing site with 30 pages and a blog, you're looking at $15,000–$40,000 all-in. That's not cheap. But if your Webflow site is generating meaningful organic traffic, the cost of a botched migration is far higher.

We publish transparent pricing for projects like this at /pricing -- worth checking if you want a realistic range for your specific situation.

Pre-Migration SEO Audit

This is where most people skip steps, and it's where most migrations fail. Before you write a single line of Next.js code, you need a complete picture of your current SEO footprint.

Crawl Everything

Run Screaming Frog (or Sitebulb, or Ahrefs Site Audit) against your live Webflow site. Export every URL. I mean every URL -- pages, CMS collection items, paginated archive pages, utility pages, everything.

You need:

  • Complete URL inventory -- every page that returns a 200 status
  • Title tags and meta descriptions for each page
  • Canonical URLs -- Webflow sometimes sets these oddly on collection pages
  • Internal link structure -- which pages link to which
  • Structured data -- any schema markup Webflow is generating
  • Core Web Vitals baseline -- run PageSpeed Insights on your top 20 pages

Document Your Top Performers

Open Google Search Console. Go to Performance. Sort by clicks for the last 12 months. Export this data. These are the pages you absolutely cannot afford to break.

I typically create a spreadsheet with columns like this:

URL | Monthly Clicks | Top Queries | Avg Position | Priority
/blog/seo-guide | 2,400 | "seo guide 2025" | 3.2 | CRITICAL
/pricing | 890 | "agency pricing" | 5.1 | HIGH
/about | 340 | "social animal dev" | 1.0 | MEDIUM

Every page in the CRITICAL and HIGH categories gets manual attention during migration. No automated bulk redirects. No assumptions.

Run an Ahrefs or SEMrush backlink report. If external sites are linking to specific Webflow URLs (especially blog posts or resource pages), those URLs must resolve correctly after migration -- either at the same path or via a 301 redirect.

Exporting Your Webflow Site

Webflow's export feature is... limited. Here's what you actually get and what you don't.

What the Export Includes

On a CMS or Business plan, clicking Export Code in Project Settings gives you a ZIP containing:

  • Static HTML files for each page
  • CSS (including Webflow's utility classes)
  • JavaScript (Webflow's runtime + your custom code)
  • Images and other uploaded assets

What the Export Doesn't Include

This is the critical part: Webflow's CMS data doesn't come with the export. Your blog posts, team members, case studies -- any content stored in CMS Collections -- won't appear as individual HTML files in a useful way. They'll be baked into the exported HTML as static content, but you lose the structured data.

To get your CMS content out properly:

  1. Use Webflow's CMS API to pull collection items as JSON
  2. Export collections as CSV from the Webflow Designer (Collection Settings → Export)
  3. Use a tool like Whalesync or Make.com to pipe CMS data into your new headless CMS

Here's a quick script to pull Webflow CMS items via their API:

// fetch-webflow-cms.js
const WEBFLOW_API_TOKEN = process.env.WEBFLOW_TOKEN;
const COLLECTION_ID = 'your-collection-id';

async function fetchCollectionItems() {
  const response = await fetch(
    `https://api.webflow.com/v2/collections/${COLLECTION_ID}/items`,
    {
      headers: {
        'Authorization': `Bearer ${WEBFLOW_API_TOKEN}`,
        'accept': 'application/json'
      }
    }
  );
  const data = await response.json();
  
  // Write to JSON file for import into your headless CMS
  const fs = require('fs');
  fs.writeFileSync(
    'cms-export.json',
    JSON.stringify(data.items, null, 2)
  );
  console.log(`Exported ${data.items.length} items`);
}

fetchCollectionItems();

Don't rely solely on the HTML export. Parse the exported files with something like Cheerio if you need to extract content from the static HTML, but the API route is cleaner.

Building the Next.js Replacement

Now the actual build. I'm assuming you're using Next.js 14 or 15 with the App Router -- if you're starting fresh in 2025, there's no reason to use the Pages Router.

URL Structure Mapping

This is non-negotiable: your new URL structure should match your old one wherever possible. Every URL change is a risk. If your Webflow blog lives at /blog/post-slug, your Next.js blog should live at /blog/post-slug.

app/
├── page.tsx                    # Homepage
├── about/
│   └── page.tsx               # /about
├── blog/
│   ├── page.tsx               # /blog (listing)
│   └── [slug]/
│       └── page.tsx           # /blog/post-slug
├── services/
│   └── [slug]/
│       └── page.tsx           # /services/web-development
└── contact/
    └── page.tsx               # /contact

Metadata Implementation

Next.js 15's metadata API is genuinely better than what Webflow gives you. You get full programmatic control, and everything renders server-side -- meaning Googlebot sees it on the first paint.

// app/blog/[slug]/page.tsx
import { Metadata } from 'next';
import { getPostBySlug } from '@/lib/cms';
import { notFound } from 'next/navigation';

type Props = {
  params: Promise<{ slug: string }>;
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPostBySlug(slug);
  
  if (!post) return {};
  
  return {
    title: post.seoTitle || post.title,
    description: post.seoDescription || post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.featuredImage, width: 1200, height: 630 }],
      type: 'article',
      publishedTime: post.publishedAt,
    },
    alternates: {
      canonical: `https://yoursite.com/blog/${slug}`,
    },
  };
}

export default async function BlogPost({ params }: Props) {
  const { slug } = await params;
  const post = await getPostBySlug(slug);
  
  if (!post) notFound();

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    datePublished: post.publishedAt,
    dateModified: post.updatedAt,
    author: {
      '@type': 'Person',
      name: post.author.name,
    },
    image: post.featuredImage,
    description: post.excerpt,
  };

  return (
    <article>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <h1>{post.title}</h1>
      {/* Render post content */}
    </article>
  );
}

Notice the canonical URL is set explicitly. Don't leave this to chance. Webflow handles canonicals automatically; in Next.js, you need to be intentional.

Performance Optimization

Two things that make the biggest difference versus Webflow:

Image optimization with next/image:

import Image from 'next/image';

<Image
  src={post.featuredImage}
  alt={post.imageAlt}
  width={1200}
  height={630}
  priority={true} // for above-the-fold images
  sizes="(max-width: 768px) 100vw, 800px"
/>

Font optimization with next/font:

import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
});

These two optimizations alone typically shave 1-2 seconds off LCP compared to Webflow's default font and image handling.

For teams considering the headless CMS side of things, we cover that integration work on our headless CMS development page.

The 301 Redirect Strategy That Actually Works

This is the section that saves your rankings. I'm going to be painfully thorough here because I've seen too many migrations fail on redirect implementation.

Build a Complete Redirect Map

Take your Screaming Frog crawl from the audit phase. For every URL that exists on the Webflow site, you need exactly one of these outcomes:

  1. Same URL on Next.js -- no redirect needed, but verify it works
  2. Different URL on Next.js -- 301 redirect from old to new
  3. Page removed -- 301 redirect to the most relevant existing page

Never return a 404 for a page that previously had traffic or backlinks. Ever.

Implement in next.config.js

// next.config.js
const redirects = require('./redirects.json');

/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
    return redirects.map(({ source, destination }) => ({
      source,
      destination,
      permanent: true, // 301 status code
    }));
  },
};

module.exports = nextConfig;

And your redirects.json:

[
  { "source": "/old-blog-post", "destination": "/blog/old-blog-post" },
  { "source": "/services/old-service", "destination": "/services/new-service" },
  { "source": "/team/:member", "destination": "/about" }
]

Use path matching patterns for bulk redirects where URL structures changed systematically. But always test these individually -- pattern matching can cause redirect loops if you're not careful.

The Webflow-Specific Gotcha

Webflow appends trailing slashes to URLs. Next.js by default does not. This means yoursite.com/about/ (Webflow) and yoursite.com/about (Next.js) are technically different URLs.

In your next.config.js, add:

const nextConfig = {
  trailingSlash: false, // or true -- just be consistent
  // ...
};

Then add explicit redirects for trailing-slash variants of your highest-traffic pages. Google will figure it out eventually through canonicals, but explicit 301s speed up the process significantly.

Handling Webflow CMS Content

If you had a Webflow CMS blog with 200 posts, you need somewhere for that content to live. You've got a few solid options in 2025:

CMS Pricing (2025) Best For Migration Effort
Sanity Free tier → $99/mo (Growth) Complex content models, real-time collaboration Medium
Contentful Free tier → $300/mo (Team) Enterprise teams, multi-language Medium-High
Payload CMS Self-hosted (free) or Cloud $30/mo+ Full control, TypeScript-native Higher initial, lower ongoing
MDX files in repo Free Small blogs (<100 posts) Low

For most Webflow-to-Next.js migrations, I recommend Sanity. Its schema flexibility maps well to Webflow's collection structure, and there are community tools for importing Webflow data. Payload CMS is increasingly popular for teams that want everything in TypeScript -- it's worth evaluating if you're building a custom stack.

The key thing: whichever CMS you choose, make sure your blog post slugs match exactly. /blog/my-great-post on Webflow needs to be /blog/my-great-post on Next.js, pulling from your new CMS.

Post-Migration SEO Monitoring

Launch day isn't the end. It's the beginning of a 4-8 week monitoring period.

Week 1: Immediate Actions

  1. Submit your new sitemap to Google Search Console (https://yoursite.com/sitemap.xml)
  2. Request indexing for your top 20 pages using URL Inspection
  3. Monitor the Coverage report -- watch for spikes in 404 errors
  4. Check redirect chains -- use Screaming Frog to crawl the live site and verify every redirect resolves in one hop

Weeks 2-4: Ranking Recovery

Expect a temporary dip. I've seen rankings drop 5-15 positions in the first two weeks even with perfect redirects. Don't panic. Google needs to recrawl, reprocess, and reassign ranking signals.

What to watch:

  • Indexed page count in Search Console -- should stabilize within 2 weeks
  • Click-through rates -- if CTR drops significantly, your meta descriptions might need adjustment
  • Core Web Vitals -- your Next.js site should be scoring better; verify in Search Console's CWV report

Weeks 4-8: Confirmation

By week 4, your rankings should be recovering. By week 8, they should match or exceed your pre-migration baseline. If they haven't recovered by week 6, something's wrong -- check for missed redirects, canonical issues, or rendering problems.

Common Mistakes That Tank Rankings

Forgetting about Webflow's auto-generated pages. Webflow creates pages you might not think about -- /blog (the collection listing), paginated pages like /blog?page=2, tag/category filter pages. Map all of them.

Not matching heading hierarchy. If your Webflow site had <h1> tags on blog posts that Google was using for featured snippets, your Next.js site needs the same hierarchy. Don't accidentally wrap your title in an <h2> because your layout component already has an <h1> somewhere.

Client-side rendering for critical content. This is the big one. If your Next.js pages load an empty shell and then fetch content client-side, Googlebot might not see your content reliably. Use server components (the default in App Router) or generateStaticParams for static generation. SSR is why you moved to Next.js -- use it.

Ignoring Open Graph and social previews. Webflow auto-generates OG tags. If your shared blog posts suddenly show broken previews on LinkedIn and Twitter, you'll lose social traffic that indirectly affects SEO.

Changing domains during migration. If you can avoid it, don't change your domain at the same time as your platform. Each change is an independent risk factor. Migrate platforms first, settle rankings, then consider a domain change as a separate project.

If this is feeling overwhelming, that's normal. Migration projects are where experience matters most. We've done enough of these to have a reliable process -- reach out through our contact page if you want to talk through your specific situation.

FAQ

How long does a Webflow to Next.js migration take?

For a typical marketing site with 20-40 pages and a blog, expect 6-12 weeks from audit to launch. The development work itself might take 4-8 weeks, but you need time for the SEO audit upfront and monitoring afterward. Rushing a migration is how you lose rankings.

Will I lose my SEO rankings when migrating from Webflow?

Not if you do it correctly. With proper 301 redirects, matching URL structures, and equivalent on-page SEO elements, you should see rankings recover within 4-8 weeks. Some sites actually see improvements because Next.js delivers better Core Web Vitals scores. The key is never letting a previously indexed URL return a 404.

Can I export my Webflow site code and use it in Next.js?

Technically yes -- Webflow exports clean HTML, CSS, and JavaScript. But practically, you wouldn't want to. Webflow's exported code uses its own class naming conventions and runtime scripts that don't map cleanly to React components. It's better to rebuild your UI in React/Next.js using the Webflow export as a visual reference, then migrate the content separately.

What headless CMS should I use to replace Webflow's CMS?

Sanity and Payload CMS are the most popular choices in 2025 for Next.js projects. Sanity offers a generous free tier and excellent real-time editing. Payload CMS is TypeScript-native and can be self-hosted. For simpler blogs, even MDX files stored in your Git repository work well. The right choice depends on your team size and content complexity.

How do I handle Webflow forms after migration?

Webflow's form handling doesn't transfer. In Next.js, you can use Server Actions (built into Next.js 14+) to process form submissions, or integrate with services like Formspree, Resend, or your own API routes. For contact forms, Server Actions with email delivery via Resend is my go-to -- it's simple and keeps everything in your codebase.

Is Next.js actually better for SEO than Webflow?

It depends on the site. For a 10-page marketing site with no custom logic, Webflow's built-in SEO tools are honestly sufficient. But for content-heavy sites, sites needing dynamic meta tags based on user context, or sites where Core Web Vitals performance matters (hint: it always matters), Next.js gives you more control. Server-side rendering ensures Googlebot always sees fully rendered HTML, and you get programmatic control over every SEO element.

How much does it cost to migrate from Webflow to Next.js?

A realistic range for a mid-size site is $15,000-$40,000 for a professional migration including SEO preservation. Freelancer rates might be lower ($5,000-$15,000) but carry more risk if they lack migration experience. The biggest cost variable is whether you need a headless CMS integration and how many custom interactions need to be rebuilt.

Should I use SSR or SSG for my migrated Next.js site?

For most marketing sites migrated from Webflow, Static Site Generation (SSG) is the right default. It's faster and cheaper to serve. Use SSR selectively for pages that need real-time data -- like a pricing page that pulls live data from an API. Next.js 15's App Router makes it easy to mix both approaches within the same project using server components and generateStaticParams.