Webflow to Next.js: a practical migration guide

Most Webflow migrations fail in the same place. The new site looks right on launch day, then traffic dips, a form stops sending leads, and the marketing team can't find the page they used to edit. None of that is a code problem. It's a planning problem, and it's avoidable.

This is the order we work in when we move a Webflow site to Next.js or Astro with a headless CMS. Adapt it, but don't skip steps.

Start with an inventory, not a design file

Before anyone opens a code editor, list everything the current site does. Crawl it with a tool like Screaming Frog, export your Search Console pages report, and pull the top landing pages from analytics. You want three lists.

• Every indexed URL, with traffic and backlinks next to it
• Every CMS collection, its fields, and how collections reference each other
• Every integration: forms, CRM, analytics tags, chat widgets, embeds, cookie banner

This inventory becomes your scope, your redirect map, and your test plan. Teams that skip it end up discovering a forgotten landing page three weeks after launch, usually because a sales rep asks why a link is broken.

Webflow's export won't get you there

Webflow can export HTML, CSS, and JavaScript, so people assume they can start from that. In practice the export leaves out CMS content, localized pages, and ecommerce, and the markup is built for Webflow's class system, not for components you'd want to maintain. CMS data comes out separately, as CSV or through the Webflow Data API.

Treat the export as a visual reference. Rebuild the design as components.

Model the content before you move it

Webflow collections are a starting point, not a content model. While mapping them, fix what has been annoying your editors for years. Split giant rich text fields into blocks. Turn repeated author text into a proper Authors collection. Replace hardcoded CTAs with a reusable block.

Pick the CMS at this stage too. Choosing a headless CMS covers the trade-offs, but the short version is that the editors' daily workflow matters more than the API.

Pick Next.js or Astro for the right reason

If the site is mostly content, Astro ships less JavaScript and is simpler to run. If the site sits close to your product, with logins, pricing logic, or app-like pages, Next.js is the safer bet. We wrote up the details in Astro vs Next.js for a marketing site.

Migrate content with a script, not by hand

Pull every collection through the Webflow API, transform it into the new model, and import it into the CMS with a script you can run again. You will run it again. Content keeps changing on the live site until cutover, so the last import happens during a short content freeze right before launch.

• Rewrite internal links in rich text to the new URL structure
• Download images and re-upload them to the new asset store, keeping alt text
• Carry over SEO fields: title, description, Open Graph image, canonical
• Keep publish dates and authors, they matter for blog SEO

Rebuild interactions on purpose

Webflow interactions are easy to add, so sites collect a lot of them. Audit each one. Keep the ones that explain something, rebuild them with CSS or a small motion library, and drop the rest. Flag anything that won't transfer 1:1 early, so nobody is surprised in review.

Redirects, forms, and tracking before launch

Three things break most often, and all three are boring.

1. 01Redirects. Build the map from your inventory and test every row on staging. See how to build a 301 redirect map.
2. 02Forms. Webflow handled submissions for you. Now each form needs a handler, spam protection, and a CRM connection. Submit a test lead from every form.
3. 03Tracking. Re-add analytics and tag manager, then check that conversions still fire. Compare a week of data after launch against the week before.

Launch with a rollback plan

Keep Webflow live until the new site is verified. Lower your DNS TTL a few days ahead, freeze content for a day, run the final import, crawl staging, then switch DNS. If something serious breaks, you point DNS back. Our launch cutover checklist has the full sequence.