Webflow to Next.js Migration: The Complete Guide

How do you migrate a Webflow site to Next.js?

You migrate a Webflow site to Next.js by rebuilding it, not converting it. Pages become React components, CMS collections move into a headless CMS, forms move to a form backend, and every old URL is either kept or redirected. Our research found no converter for this move, and Webflow's code export leaves out the CMS.

We build on Webflow, Framer and Next.js, and our own site runs on Next.js with Payload, so this guide is written from both sides. It's the hub for our Webflow-to-code series. Each section answers one part of the plan and links to a deeper article where you need more detail.

Should you leave Webflow for Next.js at all?

Leave Webflow for Next.js when you need features, performance control or ownership that Webflow can't give, and you have developers who will maintain the result. Stay if marketers build new pages every week without help and the site has no product features.

Our research found that pricing is the most common trigger. Webflow changed seat and bandwidth billing between late 2024 and 2025, and in May 2026 merged its CMS and Business plans into a Premium plan with a 20,000-item limit, according to BRIX Templates. A higher bill is a reason to look, but not by itself a reason to rebuild.

• Good reasons: product data on marketing pages, logged-in areas, complex integrations, a content model Webflow can't express, or a team that already runs Next.js.
• Weak reasons: a slow page that's slow because of images and scripts, a bill that a plan change would fix, or a wish to use newer technology.
• Red flag: no developer will own the site after launch.

We weigh these arguments in detail in why companies leave Webflow for code, and compare the two platforms by team type in Webflow vs Next.js for marketing sites. If a visual builder still suits you better, moving from code to a visual builder covers the reverse path.

Which headless CMS should replace Webflow CMS?

Replace Webflow CMS with a headless CMS chosen by two questions: who edits the content, and who should host it. Sanity suits teams that want a hosted, highly customizable editor. Payload suits teams that want the CMS inside their own Next.js codebase and database.

Watch plan structure on hosted options. Our research found Contentful's tier jumps, including limits on content types per space, push some teams toward Sanity or Payload. Check each vendor's current plan page for limits before modelling content.

We cover each route in depth: Webflow to Next.js with Sanity for the hosted, marketer-friendly architecture, and Webflow to Next.js with Payload CMS for owning your content and stack. If your site is mostly articles and docs, Webflow to Astro migration may be a better fit than Next.js.

How do you move Webflow CMS content into a headless CMS?

Move Webflow CMS content by exporting each collection, transforming it into your new content model, re-hosting every asset and importing it with a script. Rich text and references are the two places where most of the work goes.

• Export. Use Webflow's CSV export for small sites, or the Webflow Data API for large ones, since the API keeps item IDs for rebuilding references.
• Rich text. Webflow exports rich text as HTML. Convert it to your CMS's format, such as Sanity's Portable Text or Payload's rich text, and decide what happens to embeds.
• Assets. Every image URL points to Webflow's CDN, including images inside rich text. Download and re-upload them before you cancel Webflow.
• References. Import referenced collections first, such as authors and categories, then link items by slug or ID.

Model the content before writing import scripts. A Webflow collection with twenty fields often becomes three cleaner types in a headless CMS, and that's one of the main benefits of moving.

What replaces Webflow forms, memberships and ecommerce?

Each Webflow feature needs a separate replacement in Next.js: a form backend or your CRM's forms for Webflow Forms, an auth library for Memberships, and a commerce platform such as Shopify for Ecommerce. Choose them during architecture, not after the build.

Forms are the most common gap after launch. Export Webflow's stored submissions before you switch, rebuild every form, and test that each one reaches the right inbox or CRM. The full list of options is in what replaces Webflow forms, memberships and ecommerce in Next.js.

How do you keep SEO when moving from Webflow to Next.js?

Keep SEO by preserving URLs, carrying over every meta field, adding 301 redirects for anything that changes, and checking the site with a crawl after launch. Our research found the SEO risk in migrations sits in URL mapping.

1. Crawl Webflow and export every URL, title, description, canonical, Open Graph image and status code.
2. Add SEO fields to every content type in the new CMS, so editors control titles and descriptions per page.
3. Generate metadata in Next.js from those fields using the Metadata API described in the Next.js documentation.
4. Write redirects in your Next.js config or middleware for every changed path, and keep the list in version control.
5. Generate a sitemap and robots file from the CMS so new pages appear automatically.
6. Rebuild structured data for articles, FAQs and organization details where you used it on Webflow.
7. Crawl the live site after launch and fix 404s, chains and missing tags within days.

Speed is the other half. Next.js gives you control over images, fonts and scripts, but control isn't the same as speed. Our guide to Core Web Vitals for Framer, Webflow and Next.js lists the fixes that make the difference.

What are the steps in a Webflow to NextJS migration?

A Webflow to Next.js migration runs in eight steps, from audit to handover. The order matters: content model and redirects are decided before anyone builds pages.

1. 1

   Audit the Webflow site

   Inventory URLs, collections, forms, scripts, integrations and top pages by traffic.

2. 2

   Design the content model

   Turn Webflow collections into clean types in the new CMS, including SEO fields and reusable sections.

3. 3

   Choose the stack

   Pick CMS, hosting, form handling and any auth or commerce services.

4. 4

   Build components and templates

   Rebuild the design as a section library that editors can compose into pages.

5. 5

   Script the content import

   Export, transform rich text, re-host assets, rebuild references and import. Run it more than once.

6. 6

   Map and write redirects

   Match every old URL to a new one and test the redirect list on staging.

7. 7

   Launch with a freeze

   Freeze Webflow edits, run a final import, switch DNS and test forms, analytics and top pages.

8. 8

   Hand over and monitor

   Train editors, document the section library and watch Search Console for a month.

How do you hand a Next.js site over to editors?

Hand a Next.js site over by giving editors a section library, live previews, sensible roles and a short guide, then checking a month later that they're shipping without help. This is the step that decides whether the migration succeeds.

On Webflow, marketers could build anything visually. On Next.js, they compose pages from sections that developers build. That's a good trade only if the sections cover what marketers actually do: hero variants, feature grids, logos, testimonials, pricing, FAQs, CTAs and rich content. List the changes your team made in the last six months and check each one is possible in the new CMS.

• Previews. Editors should see drafts on the real design before publishing, using the framework's draft mode.
• Roles. Separate who can publish from who can edit, especially for legal and pricing pages.
• Guardrails. Limit section options to what the design supports, so pages stay on brand.
• Documentation. A one-page guide with screenshots beats a long manual nobody opens.

If you want to test variants once you're live, our guide to A/B testing in Framer, Webflow and Next.js covers the setup on each.

Can AI speed up a Webflow to Next.js migration?

Yes. AI coding agents have made the rebuild much faster, but they don't remove the SEO, QA and handover work. Our research found that the real cost of these migrations is still SEO and QA, not tokens.

Public write-ups in our research include Vellum migrating off Webflow with coding agents in about a week, zenml.io moving 2,224 pages to Astro, and cursor.com rebuilt in three days for $260. Those reports show what's possible when engineers who know the stack drive the agent.

What agents don't do well on their own is judge: which pages to cut, how to model content, whether redirects are complete, and whether editors can work without help. Our walkthrough on migrating off Webflow with Claude Code shows a practical setup and the checks a person still has to run. And whatever builds the pages, don't use Webflow's code export as a starting point; it's static markup without the CMS.

How much does a Webflow to Next.js migration cost and how long does it take?

Agency quotes for Webflow migrations range from about $1,500 to $25,000 in our research, set mostly by page count, CMS complexity and integrations. Timelines depend on the same factors, plus how quickly content decisions are made.

Typical agency migration quotes

$1.5k–$25k

Our website package, up to 6 pages

$8,000

Per extra page

+$500

Our website package is fixed at $8,000 for up to six pages, then $500 per extra page, with copywriting, custom design, a Next.js build, a CMS and animation. Migration work is scoped on the intro call, and we include redirects and SEO checks in any migration we take on. The three-year model, including CMS, hosting and developer time, is in Webflow to Next.js migration cost, and Webflow vs Framer vs Next.js total cost compares all three platforms.

What should you read next in this series?

Read the article that matches your next decision. The series is grouped by the question each piece answers.

If your marketing team wants out of engineering's queue instead, read Next.js to Framer migration, which covers the opposite trade-off.