Webflow → Next.js · Updated
Webflow to Next.js Migration
A Webflow to Next.js migration does not start from Webflow code export, because the exported code leaves out CMS content, ecommerce and user accounts and its forms and site search stop working. Webvello exports the CMS collections as data, rebuilds the components in React, and keeps the URL structure with one-to-one redirects where paths change.
Who this migration is for
- Marketing sites whose Webflow CMS has grown into a real content database that needs typed fields, references and previews.
- Teams that need forms, search, gated content or integrations that Webflow hosting currently provides and export does not.
- Companies consolidating a Webflow marketing site with a product or app built in Next.js.
What Webflow lets you export
Taken from the vendor’s own documentation, linked below. We do not promise an export the platform does not provide.
Documented export
- Webflow documents that code export produces the site HTML, CSS, JavaScript and assets.
Not exported or stops working
- Per Webflow, CMS content, Ecommerce content, User Accounts, code components and localized pages are not included in the exported code.
- Per Webflow, forms and site search do not work on exported sites, and password protection no longer applies.
Source: Webflow Help, How do I export my Webflow site code?. Accessed October 2026.
What we rebuild rather than import
- Collections are exported as data and remodeled as typed content with references, instead of being flattened into static pages.
- Interactions are reimplemented selectively; most decorative animation is dropped in favor of speed.
- Design and templates. A migration is a rebuild of the presentation layer; we do not try to convert a theme or builder output into React.
- Forms, lead routing and spam protection, wired to your CRM or inbox and tested end to end.
- Structured data: one Organization node, Service and FAQ markup that mirrors the visible page, validated before launch.
- Analytics, consent and conversion events, so the first month after cutover is measurable.
Want to know what your Webflow site would keep?
The free audit inventories your URLs and traffic and tells you what a migration would have to preserve.
How rankings are preserved
Webflow-specific notes first, then the eight steps every migration follows.
- Webflow collection URLs (/blog/slug, /projects/slug) are usually kept verbatim so most pages need no redirect at all.
- Webflow-hosted asset URLs are replaced with self-hosted or CDN paths before cutover.
- Pagination and filter URLs that Webflow generated are inventoried; those with impressions are preserved, the rest are consolidated.
- 1
Inventory every URL that exists and every URL that earns
Crawl the live site, pull the sitemap, and export the Search Console Pages and Performance reports. The union is the redirect map input; the Performance rows decide what must be preserved exactly.
- 2
Decide the new URL structure before building
Keep paths where they are sane. Change them only where the old structure was a liability, and record the change in a one-to-one map. No wildcard redirects to the homepage.
- 3
Carry metadata field by field
Titles, descriptions, canonicals, Open Graph and existing structured data are exported with the content and loaded into the new pages, then diffed against the live site.
- 4
Rebuild structured data from one identity
One Organization node with the real address, phone and founder; Service, Article and FAQ markup that mirrors the visible page; validated before launch.
- 5
Preserve internal links and images
In-body links are rewritten to the new paths rather than left to bounce through redirects. Images are self-hosted so nothing depends on the old platform staying up.
- 6
Test the redirect map against the inventory
Every old URL is requested and must return one 301 to a 200 page. Chains, loops and 404s fail the launch.
- 7
Cut over and submit
DNS switch, new sitemap submitted, IndexNow ping, and a full crawl of the new site within the first day.
- 8
Monitor index coverage for a month
Indexed versus submitted, crawl errors, redirect-reported URLs and the top earning queries are checked weekly. A migration is done when coverage matches or beats the old site, not when the new one is live.
Why coverage is the finish line: our index coverage research. How AI agents read the result: which AI crawlers visit your site.
Why businesses make this move
- Server-rendered HTML. Search engines and the search-type AI agents read the page as delivered, not after a browser runs scripts.
- No plugin or app layer to patch, which removes a class of security and performance regressions.
- Content modeled as data, so the same facts feed pages, schema and llms.txt without drifting apart.
How the engagement runs
| Phase | What happens |
|---|---|
| Discovery | Goals, constraints, what the current platform does well, what it blocks. Access to analytics, Search Console and the admin. |
| Inventory | URL list, content audit, export of everything the platform allows, capture of everything it does not. |
| Content model and design | Document types and fields, page templates, components. Approval before build. |
| Build | Next.js frontend, CMS setup, content load, forms, schema, analytics and consent. |
| Redirect map and QA | Old to new URL map, automated redirect test, page-by-page content diff, accessibility and performance checks. |
| Cutover | DNS switch, sitemap and IndexNow submission, first crawl, old platform kept read-only until coverage is confirmed. |
| Monitoring | Weekly index coverage, crawl errors and query checks for a month; fixes shipped as found. |
Common questions
Can I just export my Webflow code and host it?
You can export HTML, CSS and JavaScript, but Webflow documents that CMS content, ecommerce, user accounts, code components and localized pages are not included, and forms and site search do not work on exported sites. For a brochure site with no CMS that may be enough; for anything else it is a starting point at best.
How do CMS collections move?
Collections are exported as data, mapped onto a content model in a headless CMS or typed content files, and references between collections are preserved rather than flattened.
Will the design change?
Only if you want it to. Components are rebuilt in React to match the current design; the migration is also the natural moment to fix what the Webflow version got wrong.
What about Webflow Ecommerce?
Webflow documents that ecommerce content is not included in code export. Stores are rebuilt on a headless commerce backend with the catalog exported as data.
Related
Other migration paths
Planning a Webflow move?
Tell us the page count and what the site has to keep doing. We will come back with what can be exported, what has to be rebuilt, and a dated plan.
Book a Free Call