A Webflow to Next.js migration is a rebuild, not an export. Webflow's code export leaves out CMS content, ecommerce, user accounts and localised content, so your pages get rebuilt as React components and your content moves across as data. Market quotes from agencies and freelancers run from about $5,000 to $50,000+ over 4 to 12 weeks, and your Google rankings survive if every old Webflow URL either stays the same or gets a permanent 301 redirect.
I build Next.js marketing sites for a living. As Senior Web Developer at Procol I rebuilt procol.ai on Next.js, TypeScript and Tailwind CSS, and I keep its marketing site and landing pages fast on every device. That wasn't a Webflow migration, but it's the same destination stack. I've also moved a site off a no-code builder before: the Aura Clips agency site went from Framer to WordPress on Bricks Builder. What follows is what I'd tell anyone before they sign a quote for this kind of move.
What actually moves from Webflow to Next.js?
Your design, copy and URL structure come across. Webflow's platform features stay behind: hosting, the CMS editor, form handling and the interaction runtime all have to be replaced. That's less than most people expect to carry over.
| Part of the site | What Webflow gives you | What happens in Next.js |
|---|---|---|
| Static pages | HTML, CSS and JS through code export, a paid feature | Rebuilt as React components. The export is a reference, not your codebase |
| CMS collections | CSV export per collection | Imported into a headless CMS, Markdown/MDX files or headless WordPress |
| Images and files | Hosted on Webflow's CDN | Downloaded, compressed and re-hosted, served through next/image |
| Forms | Submissions handled by Webflow | Rebuilt to post to your CRM, inbox or a sheet |
| Interactions | Run by Webflow's own JavaScript | Recreated in CSS or a motion library, or dropped |
| Ecommerce, user accounts, localisation | Not in the code export | Separate workstreams, each priced on its own |
| SEO settings and 301s | Page settings and hosting settings | Re-created with the Next.js Metadata API and a redirects() array |
What happens to Webflow CMS collections?
Each collection exports as a CSV file, but the data still has to be mapped, cleaned and imported somewhere before Next.js can use it. Webflow confirms you can export collection content as a CSV. That gets the data out. It doesn't put it anywhere. Someone still has to:
- Map every field type, especially reference and multi-reference fields, which link items across collections.
- Clean up rich text, which arrives as HTML with Webflow's class names in it.
- Re-host every image the CSV points to.
- Rebuild each collection template page as a Next.js dynamic route.
The bigger decision is where your content lives afterwards, because your team loses Webflow's visual editor:
| Destination | Best for | Trade-off |
|---|---|---|
| Markdown or MDX in the repo | Small sites edited by developers | Marketers need Git or a developer for every edit |
| Headless CMS (Sanity, Payload, Contentful) | Teams that publish weekly and want structured content | Another tool to learn, sometimes another bill |
| Headless WordPress | Teams that already know the WordPress editor | Two systems to host and keep updated |
If you're leaning towards the last one, I've written about when headless WordPress with Next.js is worth it and what a headless WordPress build costs.
What happens to forms, interactions and assets?
Forms stop working once the site leaves Webflow hosting. Interactions have to be recreated or dropped. Every file Webflow hosts for you has to be downloaded and moved. Here's how I handle each one.
Forms. Webflow forms post to Webflow, so once the site leaves Webflow hosting they stop sending. Webflow users have run into this when they publish exported code elsewhere. In Next.js, each form gets a route handler or server action that sends the entry to HubSpot, your inbox or a Google Sheet, with spam protection and a GA4 event on success. It's the same lead capture I set up on landing pages with GA4, GTM and HubSpot. Test every form with a real submission before launch. A few weeks of lost enquiries can cost you more than the migration did.
Interactions. List every Webflow interaction during the audit and decide what each one is actually worth. Most scroll fades and hover states are a few lines of CSS. Complex timelines need a motion library, and animation JavaScript can make the site feel sluggish on mid-range phones. Don't pay to recreate animations nobody noticed.
Assets. Download every image, font, video and PDF before you cancel the Webflow plan, and don't let the new site hot-link files from Webflow's CDN. Then compress and convert them. My free Under1MB image converter does this in the browser.
How much does a Webflow to Next.js migration cost?
TechnologyChecker puts an agency or freelancer migration at about $5,000 to $50,000+ over 4 to 12 weeks, and Virdis quotes Next.js rebuilds of B2B SaaS marketing sites at $25,000 to $80,000. These are published market ranges. They're other people's numbers, not my rates.
| Source | What it measures | Range |
|---|---|---|
| TechnologyChecker | Webflow to Next.js via agency or freelancer | ~$5,000 to $50,000+, 4 to 12 weeks |
| Virdis | Next.js rebuild of a B2B SaaS marketing site | $25,000 to $80,000 |
| Enlight Lab | Next.js builds generally | $8,000 for a simple site to $150,000+ for enterprise |
| Upwork | Next.js freelancer projects | $800 for small updates to $50,000+ |
| PandaCodeGen | One agency's own Webflow migration tiers | From $1,500 (the agency says this isn't a market average) |
The spread is huge because "migration" covers everything from a ten-page brochure site to a 300-page SaaS site with three CMS collections and a pricing calculator. Here's what actually moves the price:
- Template count, not page count. Fifty blog posts share one template. Fifty unique landing pages are fifty builds. PandaCodeGen makes the same point: count templates before you budget.
- CMS complexity. How many collections you have, how many reference fields, and how much content needs cleaning.
- Like-for-like or redesign. A redesign adds design rounds and approvals. If budget is tight, keep the two decisions separate.
- Forms and integrations. HubSpot, CRMs, calculators, gated content, product sign-up.
- Ecommerce, memberships and localisation. None of these come out in the code export, so each one is its own project.
- SEO protection. Redirect mapping, metadata, schema and post-launch monitoring. Skipping this is a false economy. Lost rankings usually cost more than the work would have.
Running costs change too. Virdis puts a Webflow Site plan at $14 to $39 a month against $0 to $20 for Vercel, before any headless CMS fee. Hosting savings alone will rarely pay back a rebuild. Move because you need the speed, the custom features or the link to your product, not to save a few dollars a month.
How do you keep SEO when leaving Webflow?
Keep every URL identical where you can, permanently redirect the rest, and carry over titles, meta descriptions, canonicals and your existing 301s. The best redirect is the one you don't need. Webflow collection pages live at /collection-slug/item-slug, and a Next.js dynamic route can mirror that exactly.
Before you build, collect:
- Every live URL, from a crawl and from Webflow's auto-generated sitemap.
- Your top pages and queries from Google Search Console.
- The existing 301s in Webflow's hosting settings. Old redirects still carry links, so they have to come with you.
- Titles, meta descriptions, Open Graph images, canonicals and alt text for every page.
Then build the redirect file. My free Redirect Map Builder takes old and new URL pairs and gives you a redirects() array to paste into next.config.js. It flags chains, loops, duplicates, trailing-slash mismatches, query strings and other domains before they reach production. Its pattern suggestions are written for WordPress archives, so for a Webflow site, paste explicit pairs.
Watch the redirect limit on Vercel
The Next.js docs note that Vercel caps redirects at 1,024. For bigger maps, handle them in Proxy (called middleware before Next.js 16) with a lookup table instead of next.config.js.
That limit is in the Next.js redirecting guide, and developers have hit it because rewrites count towards the same total. Match Webflow's trailing-slash behaviour as well, or you'll end up creating a redirect for every URL on the site.
If the domain itself changes, follow Google's site move guidance. The full process I use for platform moves is in how to move from WordPress to Next.js without losing SEO. The source platform is different, but the redirect and metadata work is the same, down to sitemaps, canonicals and JSON-LD structured data.
- 1
Freeze content
Stop publishing in Webflow a few days before launch so the CSV export and the new site match.
- 2
Test on staging
Run every old URL through the redirect map, submit every form and compare titles and canonicals page by page.
- 3
Switch DNS
Point the domain at the new host, confirm HTTPS and spot-check the top 20 URLs from Search Console.
- 4
Submit the sitemap
Submit the new sitemap in Search Console and inspect your most important URLs.
- 5
Watch for four weeks
Check 404s, indexing reports and rankings for key pages, then fix gaps the same day.
How do you protect Core Web Vitals after launch?
A Next.js site only passes Core Web Vitals if it's built for speed. The targets are an LCP of 2.5 seconds or less, INP of 200 milliseconds or less and CLS of 0.1 or less. Next.js isn't fast by default. On the Next.js sites I build, that means:
- Server components by default, with client JavaScript only where something is interactive.
- next/image with correct sizes, and the hero image preloaded.
- next/font, so text doesn't jump when fonts load.
- A hard look at third-party tags in Google Tag Manager. They often cost more than the whole framework.
- Animations that don't block input, so the interactions you kept don't wreck INP.
Measure the Webflow site before launch so you have a baseline to compare against. Field data in Search Console takes weeks to catch up, so watch lab scores in the meantime. If a report shows problems, work through the failing Next.js metrics in order of impact. If pages drop out of the index, go to Search Console's indexing report first, starting with crawled but not indexed pages.
Should you move from Webflow to Next.js at all?
Not always. If the site is small, your marketers edit it daily without a developer and you don't need custom logic, I'd stay on Webflow. Move to Next.js if you need product integration, custom features, tighter control over performance, or a developer team that wants the site in Git. And if what you really want is an easy editor with less lock-in, WordPress may suit you better. I compare the two in Webflow vs WordPress.
What should you ask a developer before you sign?
Ask about templates, content, forms, redirects, performance, ownership and support after launch. These are the questions I'd want answered:
- How many templates did you count, and which pages are unique builds?
- Where will CMS content live, and who on my team will edit it?
- Where will form submissions go, and how will you test them?
- Can I see the full redirect map before launch?
- How will you measure Core Web Vitals before and after?
- Who owns the repository, hosting and CMS accounts at the end?
- What support is included in the first month after launch?
A good answer is specific. "We'll handle SEO" isn't an answer. If you want a written scope to compare quotes against, list your templates, collections, forms and integrations before you ask anyone for a price. My free Project Scope Generator will give you a starting structure.
Next step
Send me your Webflow URL, your sitemap and a line on why you want to move. I'll tell you how many templates I count, where your content should live and what the redirect map looks like. Start on the contact page, or read how I build Next.js and React websites.
