Is this case study based on a real client?

No. It's a hypothetical walkthrough of a typical Webflow to Next.js migration, written to show the process, the decisions and what to measure. We don't publish client numbers here, and none of the figures describe a real company. Use it as a template for planning your own move and for setting up the before and after measurements.

Will Lighthouse scores improve automatically on Next.js?

No. Next.js gives you control over the things that affect scores, such as image sizes, font loading, script loading and caching. A careful build usually scores well, but a site full of client-side JavaScript, large hero videos and third-party tags can score worse than the Webflow version. Measure each template before and after rather than assuming.

How soon after launch can you judge the migration?

Check daily for the first two weeks for errors: 404s, broken redirects, failed forms and indexing problems. Judge speed once Search Console's Core Web Vitals report has refreshed with new real-user data, which takes weeks. Judge organic traffic over a couple of months, comparing the same period year over year to rule out seasonal swings.

Should we redesign and migrate at the same time?

Often yes, because rebuilding the same design in new code is wasted effort if the design is already dated. The risk is changing too much at once, which makes it hard to tell what caused a traffic change. Keep URLs and core content stable, redesign the presentation, and change messaging in a later round if you want clean measurements.

All posts

Platform migrations

Webflow to Next.js Case Study: Faster Pages, Lower Bills, Same Rankings

A hypothetical Webflow to Next.js case study: how to benchmark Lighthouse, hosting cost and organic traffic before and after, plus the editor trade-offs.

By Mehdi HassanOct 29, 20267 min read

The short answer

This Webflow to Next.js case study is a hypothetical walkthrough, not a client result. After a well-run move you can expect more control over page speed, a different cost structure and stable rankings if URLs and redirects are handled. Expect one real trade-off: marketers lose the visual canvas and gain a structured page builder.

Key takeaways

This is an illustrative walkthrough of a typical migration, not a real client's numbers.
Benchmark Lighthouse, Core Web Vitals, hosting cost and organic traffic before you touch anything.
Rankings hold when URLs stay put and every changed URL has a redirect.
Speed gains come from build decisions, not from Next.js by itself.
The editor experience changes most. Plan the block library and training around it.

What does this Webflow to NextJS case study cover?

This Webflow to Next.js case study is a hypothetical walkthrough: an illustrative company, a typical site and the decisions a migration involves. It is not a real client project, and none of it should be read as a measured result. We use it to show what to measure before and after, what usually changes, and the trade-offs teams don't hear about until launch.

A hypothetical example: a Series A B2B software company has a Webflow site with around 40 static pages, a blog with about 150 posts in the CMS, a customer stories collection and a handful of demo forms. Its engineers want the site in the same repo as the product's design system, and marketing is hitting CMS limits. The full playbook for a move like this is in our Webflow to Next.js migration guide.

Why would a company like this leave Webflow?

In this hypothetical, the company leaves for three reasons that come up often: the site needs features Webflow handles awkwardly, engineers are already touching it, and the plan structure is shaping what marketing can publish. Any one alone usually isn't enough, and we'd push back if it were.

Product-linked pages. Integration pages should come from the product's own data, and pricing should read from the billing system.
Ownership. Engineers want the marketing site to share components with the app instead of copying styles by hand.
Plan pressure. Webflow's pricing has moved, including seat changes from late 2024 and, as BRIX Templates reports, a May 2026 plan merge into Premium with a 20,000-item CMS limit.

Before agreeing to the rebuild, we'd run the strip-out-auth-and-transactions test from Webflow vs Next.js. Here the site fails it: the integration directory and live pricing are product logic. Our piece on why companies leave Webflow and who shouldn't covers the cases where we'd advise staying.

What should you benchmark before the migration?

Benchmark everything you'll want to compare later, before any code is written. Without a baseline, nobody can say whether the move worked, and small SEO problems after launch go unnoticed for weeks.

Metric	Where to get it	Why it matters
Lighthouse scores per template	Lighthouse in Chrome DevTools	Lab view of speed and accessibility
Core Web Vitals (LCP, INP, CLS)	Search Console and PageSpeed Insights	What real visitors experience
Organic clicks and top pages	Search Console, last 12 months	The traffic you must protect
Indexed URLs and backlinks	A full crawl plus Ahrefs or Semrush	Every URL that needs a home
Monthly platform cost	Webflow plan, seats and add-ons	The bill you're replacing
Form conversion rate	CRM and analytics	The revenue the site produces
Time to publish a page	Ask the marketing team	The editor experience you'll change

How would the migration run, step by step?

The hypothetical project runs in six stages, with content and SEO work running alongside design and build. The order matters more than the speed.

Audit and URL inventory
Crawl the Webflow site, export every collection and list every URL with its traffic and backlinks.
Content model
Design collections and section blocks in the CMS, here Payload, so marketing can build pages from parts.
Design and component build
Rebuild the design as Next.js components that share tokens with the product's design system.
Content import
Script the move of posts and customer stories, convert rich text, and re-host every image from Webflow's CDN.
Forms, redirects and SEO
Rebuild forms to post to the CRM, keep URLs where possible, redirect the rest and carry over meta and structured data.
QA and launch
Test every template, form and redirect on staging, then switch DNS and watch Search Console daily.

The CMS choice is its own decision. We'd pick Payload here because the engineers want content in their own database, and we explain why in Webflow to Next.js and Payload CMS. Forms and other platform features are mapped in what replaces Webflow forms in Next.js.

What results can you expect after moving from Webflow to Next.js?

You can expect results in three areas, but none of them are automatic. Each depends on decisions made during the build.

Faster pages, if you build for it. Next.js gives full control over images, fonts, scripts and caching. Teams that use that control usually improve Core Web Vitals; teams that add heavy client-side JavaScript can make the site slower.
A different bill. The Webflow plan and seats go away, replaced by hosting, a database and developer time. Lower platform spend is common; lower total cost depends on how much developer time the site needs.
Same rankings, if the SEO work is done. Rankings usually hold when URLs, content and meta stay the same and every changed URL redirects. Drops come from missed redirects and lost content, not from the platform.

Platform-specific speed fixes are in Core Web Vitals for Framer, Webflow and Next.js, and the cost side is in Webflow to Next.js migration cost.

How to read your post-launch numbers honestly

Compare like with like. Lighthouse lab scores move from run to run, so test each template several times and compare medians. Core Web Vitals in Search Console are based on real-user data collected over weeks, so wait for the report to refresh before judging. For organic traffic, compare the same weeks year over year rather than the week before launch, because seasonality can look like a migration effect.

If traffic drops, check in this order: pages returning 404, redirects that chain or loop, missing titles or canonicals, pages blocked from indexing, and content that didn't make it across.

What are the editor-experience trade-offs?

The editor experience is where a Webflow to Next.js move costs something real. Marketers give up the free-form canvas, where they could design a new layout by dragging elements, and get a structured page builder with live preview instead.

Pros

Pages built from approved blocks stay on-brand
Live preview and drafts make publishing safe
No CMS item caps or editor seat fees
Content and code live in one repo

Cons

New layouts need a developer
Interactions are rebuilt in code, not tweaked visually
Marketers need training on the new CMS
Hosting and upgrades become the team's job

In this hypothetical, the trade-off is acceptable because engineers already own the site. For a team without engineers, it's the reason to stay on a builder, and some teams reverse course, as covered in Next.js to Webflow migration.

What lessons carry over to a real migration?

The lessons from this walkthrough apply to any Webflow to Next.js move: start the URL inventory on day one, settle the content model before design is final, and train editors before launch rather than after.

Frequently asked questions

Is this case study based on a real client?: No. It's a hypothetical walkthrough of a typical Webflow to Next.js migration, written to show the process, the decisions and what to measure. We don't publish client numbers here, and none of the figures describe a real company. Use it as a template for planning your own move and for setting up the before and after measurements.
Will Lighthouse scores improve automatically on Next.js?: No. Next.js gives you control over the things that affect scores, such as image sizes, font loading, script loading and caching. A careful build usually scores well, but a site full of client-side JavaScript, large hero videos and third-party tags can score worse than the Webflow version. Measure each template before and after rather than assuming.
How soon after launch can you judge the migration?: Check daily for the first two weeks for errors: 404s, broken redirects, failed forms and indexing problems. Judge speed once Search Console's Core Web Vitals report has refreshed with new real-user data, which takes weeks. Judge organic traffic over a couple of months, comparing the same period year over year to rule out seasonal swings.
Should we redesign and migrate at the same time?: Often yes, because rebuilding the same design in new code is wasted effort if the design is already dated. The risk is changing too much at once, which makes it hard to tell what caused a traffic change. Keep URLs and core content stable, redesign the presentation, and change messaging in a later round if you want clean measurements.

Mehdi Hassan · CEO & Design Director

Copywriter, designer and developer, and founder of Designify Studio. Over five years, 60+ projects across 14+ industries, for startups that have raised $300M+.

Want this done for you? Website, $8,000.

A multi-page marketing site, designed by us, developed in Next.js and animated. $8,000, one-time, up to 6 pages. Book a free 30-minute call to see if it fits.

Schedule Call