Migration · Webflow to Next.js

Webflow Migrationto Next.js.

When Webflow is no longer enough (too many pages, several languages, fragile integrations, business logic it can't hold), we rebuild your site in Next.js: code you own, hosted where you choose, with the CMS that suits your team. Your design, content and traffic come with you.

Audit · Next.js rebuild · CMS of your choice · 301 redirects · operations
rebuild-plan.json
Webflow → Next.js
Existing Webflow site
Pages · CMS · interactions · integrations
00
Audit & limits
What blocks, what works
01
Architecture & CMS
Pages, data, editing tool
02
Next.js in production
Code · hosting · CI
03
Operations
Backups · updates · monitoring
04
Code you ownTraffic protectedHosting of your choice

In short

A Webflow to Next.js migration means rebuilding a Webflow site in code with Next.js, a widely used development framework for websites and applications. The design, content and URLs are carried over. What Webflow handled for you (hosting, CMS, forms) is replaced by building blocks chosen for your project. You win twice: the platform's limits go away (volume, languages, integrations, business logic) and you own code that any development team can pick up. Scroll, a Paris-based agency, made this journey for its own site: you benefit from that experience.

300+ projects delivered150+ clients supported4.9 Google rating2021 agency founded in February The site you're browsing: rebuilt from Webflow to Next.js + Payload
01 — The right decision

Keep, extend or rebuild?

Webflow remains an excellent tool for many marketing sites: we build and maintain them. Before recommending a rebuild, we answer three questions.

Question 1

Keep Webflow

Showcase site with stable needs, a team that edits the design itself, limits mainly around content or SEO. An optimisation or a redesign within Webflow is enough.

Stay on Webflow
Question 2

Extend Webflow

The site works, but it needs to connect to a CRM, automate some flows or add a one-off feature. Integrations and automations around Webflow may be enough.

Webflow + integrations
Question 3

Rebuild in Next.js

The limits are structural: volume, languages, business logic, performance, platform dependency. A code rebuild creates a foundation you own.

Next.js + CMS of your choice
02 — Warning signs

When Webflow is no longer enough.

Leaving Webflow makes sense when the platform sets the project's limits instead of your needs. The most common signals:

Webflow plan limits getting close
Several languages heavy or costly to manage
CRM or ERP integrations relying on workarounds
Business logic it can't hold: calculations, simulators, logged-in areas
Data that must stay with you, or in France
Scripts and embeds piled up in pages
Performance dropping as volume grows
Linked collections hard to evolve
Need for tests, versioning and code review
Subscriptions and seats growing with the team
Only one person still knows how to edit the site
Wanting to switch providers without starting over

Recognise several of these signs? The question becomes: what to rebuild, and in what order. That's exactly what our audit sets out.

03 — SEO under control

The cutover checklist.

Changing technology changes how every page is produced and served. We're here to preserve your traffic: the cutover is prepared URL by URL, then monitored after launch.

Full URL inventory, including Webflow collection URLs
Pages that bring traffic (Search Console, analytics)
Titles, meta descriptions and social images carried over page by page
H1 and heading structure (Hn)
Server-rendered pages: content is in the HTML, not loaded afterwards
Metadata present in the server's first response
Images re-hosted, no longer dependent on Webflow's CDN
301 redirect plan (1 URL → 1 clear destination)
Internal links written inside content, fixed
Automatically generated sitemap.xml
Robots.txt and canonical tags checked
Languages: one URL per language and hreflang tags
Search Console monitoring after launch
Before/after comparison over several weeks
First protect what works, then use the rebuild to gain ground where Webflow held you back: server rendering, speed, languages.
04 — Page by page

What we keep, what we rebuild.

A rebuild isn't a code export. Webflow's export gives you HTML and CSS pages, useful as a reference, rarely as a base to build on. We decide page by page, component by component.

We keep
  • The design that works
  • URLs that matter
  • High-performing content
  • Useful metadata
  • Images and media
  • Animations that serve the message
  • Key forms
  • Analytics events
  • Editorial autonomy
We rebuild
  • Pages as reusable components
  • Interactions and animations, in code
  • The content model
  • Forms and where they send data
  • Integrations with your tools
  • Languages
  • Business logic
  • Hosting
  • Backups and monitoring

The right approach may be a full rebuild or, for a large site, a step-by-step rebuild.

05 — Mapping

From Webflow to Next.js.

The point isn't to copy pages, but to replace what the platform did for you with building blocks you control.

Existing WebflowNext.js destination
Designer pagesReusable React components
Webflow interactionsCoded, lighter animations
CMS collectionsCollections in the chosen CMS (Payload by default, or Directus)
Webflow LocalizationLanguages handled by the site, one URL per language
Webflow formsDeveloped forms, sent to your tools
Webflow hostingHosting of your choice (OVH, Vercel, Scaleway…)
Scripts and embedsIntegrations kept, cleaned up or replaced
SEO settingsMetadata, sitemap and redirects handled in code
06 — The destination

Why Next.js after Webflow.

Next.js underpins almost all our projects, websites and applications alike. After a rebuild, your site can gain:

See our Next.js agency
01Code you own, in your own repository
02Hosting of your choice, in France if you wish
03Server-rendered pages, fast and readable by search engines
04Languages handled by the site, without a platform add-on
05Integrations properly built with your CRM or tools
06Business logic: simulators, logged-in areas, calculations
07Automated tests and deployments
08Code other developers can pick up, including those working with AI assistants
09A foundation ready for new features, without changing tools

A coded site needs hosting, backups and updates: we take care of it, or train your team if it prefers to stay in control.

What about the CMS?

Next.js displays the site; the CMS is where your team edits the content. We choose the one that suits your team with you.

Payload

The CMS installs inside the Next.js site: one project, an admin designed for your content. It's what we use for our own site and for our clients.

Our default choice
See Webflow to Payload migration

Directus

When the same data must feed both a website and an application, or your team needs a real data back-office, Directus is an excellent option.

Website + application
See our Directus agency

No CMS

For a site of a few rarely updated pages, content can live in the code: lighter to maintain.

Rarely updated site
07 — Method

Six steps.

A dedicated team from scoping to delivery, with a dedicated project lead.

01

Site and limits audit

Pages, collections, interactions, forms, integrations, languages, SEO, performance, and what is really blocking you. Full inventory of URLs and their traffic.

02

Architecture & CMS choice

Site structure, content model, editing tool, integrations and hosting. What is kept, merged, deleted or redirected: every important URL gets a destination and a 301.

03

Design decision

What is kept from the existing design, cleaned up into reusable components or redesigned, based on your goals. Webflow animations are recoded, not copied.

04

Next.js development

Components, pages, forms, languages, business logic, integrations, technical SEO, tests and continuous integration.

05

Content transfer & 301s

Content retrieved through Webflow's API or by export, cleaned up, imported into the chosen CMS, then redirects put in place.

06

Launch & operations

Pre-production checks, cutover, then monitoring: 404s, indexing, Search Console, conversion. After that, hosting, backups, updates and monitoring are handled by us or by your team.

08 — Our proof

Our own exit from Webflow.

Our site used to run on Webflow. We rebuilt it in Next.js, with Payload as the CMS, and it has been live since 12 June 2026. We went through the cutover as a client would: what to carry over, what breaks, what to watch afterwards.

  • Nearly 200 articles carried over from Webflow, in French and English
  • A 301 redirect plan prepared before launch
  • Pitfalls found and fixed : content stored outside the body text, invisible characters, tags served too late
  • A site hosted on our own server, with encrypted off-server backups
Our site, in production: figures below
agence-scroll.com / admin
Payload · live
Collections
Pages
Articles
Case studies
Services
Media
Pages — Webflow → Next.js MigrationPublished
Hero Block
SEO Checklist Block
Mapping Table Block
FAQ Block
SEO fields title · meta · OGRedirects 301
09 — The benefit

Before / after.

What the rebuild changes in practice, topic by topic.

SubjectBefore: WebflowAfter: Next.js
CodeAt Webflow, exportable as static pagesIn your repository, versioned and tested
HostingAt Webflow onlyWith the host of your choice
LanguagesPlatform add-onBuilt into the site, one URL per language
IntegrationsScripts and relay servicesBuilt and connected to your tools
Business logicDifficult, often worked aroundBuilt for your needs
PerformanceDependent on the platform and scriptsServer rendering, controlled images and scripts
OperationsHandled by Webflow, on its termsHandled by us, or by your team if you prefer
Switching providersTied to the platformAny Next.js team can take over
10 — Example destination

Our site, in figures.

The site you're browsing, rebuilt after Webflow. Figures as of 27 October 2026.

Bilingual editorial site · Next.js

245 articles, 2 languages,
one project.

Service pages, blog, case studies and translations managed day to day by our team, in the Payload admin.

StackNext.js 16 · TypeScript · Payload 3.88
Content245 articles in French and English
Collections11 content types
Changes234 database migrations since June 2026
HostingOVH server, self-hosted database
BackupsEncrypted, off-server
11 — Timeline

How long should you plan for?

The audit is what gives a reliable timeline. It depends on factors such as:

  • Number of pages and URLs
  • Number of CMS collections
  • Content volume
  • Keeping or redesigning the design and animations
  • Multilingual support
  • Integrations and business logic
  • Choice of CMS
  • SEO equity to protect
  • Expected hosting and operations
For our own site (nearly 200 articles, two languages), about three weeks were enough to go live. For yours, we set a realistic timeline at the audit stage, before you commit to anything.
Audit my site
12 — FAQ

Frequently asked questions

The questions that come up most often during scoping. If yours isn't listed, get in touch!

Not always. If Webflow still meets your needs, it's better to optimise it, redesign it or extend it with integrations. We also build and maintain Webflow sites. A Next.js rebuild becomes relevant when the limits are structural: volume, languages, integrations, business logic, platform dependency.

Webflow's export gives you the pages' HTML, CSS and images. CMS content is retrieved separately, and anything that depends on the platform (forms, hosting, CMS) doesn't come with it. It's a good visual reference, rarely a codebase to build on: we rebuild in components.

No. Payload is our default choice when the team publishes often, because it installs inside the Next.js site itself. When the site shares its data with an application, we also work with Directus. And for a site that rarely changes, content can live in the code. Other headless CMSs exist (Sanity, for example) and are chosen depending on your context. The Payload case is covered on our Webflow to Payload migration page.

Yes for the content: text, images, articles and pages built from the site's sections, in the CMS. For design changes and new features, our team takes over and builds them properly, with no risk of breaking a live page.

We're here to preserve them. The cutover is prepared URL by URL: inventory, a 301 redirect for every changed URL, metadata carried over, server-rendered pages, sitemap. Then we monitor the site in Search Console for several weeks and fix issues as they come up. It's also a chance to gain ground where Webflow held you back.

You choose the host, in France if you wish, and who runs it: us, your team or another provider. A coded site needs updates, backups and monitoring; we plan for that from the start.

Next.js is the technology of the site itself; Payload is a CMS, the tool where the team edits content. This page covers rebuilding the site: code, hosting, integrations, operations. The Webflow to Payload migration page covers migrating the CMS: content model, media, editorial workflows. In most of our projects, the two go together.

Yes, for our own site, rebuilt from Webflow to Next.js and Payload and live since 12 June 2026. We also know Webflow from the inside, since we build and maintain Webflow sites. Next.js underpins almost all our projects. Scroll has delivered 300+ projects since its launch in February 2021, supports 150+ clients and holds a 4.9 Google rating.
Get started

Is your Webflow site no longer enough?

Let's talk. We audit your site, tell you whether it's better to optimise, extend or rebuild it, and propose a Next.js rebuild plan with the CMS that suits your team and your traffic protected.

Contact details
contact@agence-scroll.com
+33 6 48 03 90 27
20 Rue des Taillandiers
75011 Paris
Response within 24 business hours.