# Webflow to Next.js migration: when and how

> Webflow to Next.js migration: the signs it is time to move, when to stay, how to pick a CMS and a step-by-step plan that keeps your SEO and analytics intact.

Canonical page: https://kyvrel.com/blog/webflow-to-nextjs-migration
Published: 2025-01-22 · 5 min read · Kyvrel

A Webflow to Next.js migration makes sense when your site has outgrown what a visual builder does well: complex content, several languages, custom integrations or strict performance targets. It does not make sense just because Next.js is popular. This guide covers the signs it is time, the cases where Webflow is still the right tool and a migration plan that protects your rankings.

Webflow is a good product. For many marketing sites it is the fastest way from design to launch, and a team without developers can run it. The question is not which tool is better in general. It is which one costs less, in money and friction, for the site you will have in two years.

## When a Webflow to Next.js migration makes sense

In our projects, teams start asking about a move for a handful of recurring reasons. One of them alone is rarely enough. Two or three together usually are.

- **Content outgrows the CMS model.** Deeply related collections, reusable content blocks across pages or thousands of items push against plan limits and the collection structure.
- **You need several languages.** Webflow has a localization product, but pricing scales per locale, and complex multilingual SEO setups can be hard to control.
- **Integrations are getting custom.** Gated content, pricing pulled from your app, product data from an API or logic that runs on the server.
- **Performance is a requirement, not a hope.** You want control over every script, font and image, and you want to set the budget yourself.
- **Developers already own the product side.** If your app is built with React, a marketing site in the same stack can share components, auth and design tokens.
- **Lock-in has become a risk.** Code export does not include a working CMS, so your content model lives inside the platform.

## When should you stay on Webflow?

There are good reasons not to migrate, and we say so on calls. Stay on Webflow if most of these apply:

- The site is under about 20 templates and changes mostly in copy and images.
- Your marketing team builds new pages visually and likes doing it.
- You have no developer budget after launch, even a small one.
- None of the triggers above is causing real cost today.

A custom build moves work from the platform to your codebase. That gives you control, but someone has to maintain dependencies, hosting and the CMS integration. If nobody will own that, a migration trades one problem for another. Count that maintenance time in the budget before you decide.

## What changes for your marketing team

The biggest fear we hear is "we will need a developer for every change". That is a CMS choice, not a Next.js limitation. With a headless CMS, editors create pages from approved blocks, preview them and publish without a deploy.

### Choosing the CMS

Pick the CMS by who edits and how often, not by feature lists. Things worth checking:

- **Visual preview** of drafts on the real page layout.
- **Page building from blocks,** so marketing can assemble landing pages.
- **Localization model:** field-level or document-level translations.
- **Roles and approvals** if several people publish.
- **Pricing per seat and per locale,** since both grow over time.

Popular headless options include Sanity, Contentful, Storyblok and Payload. Each fits a different team. We decide after looking at your content model, not before.

## The migration plan, step by step

A migration is a redesign with stricter rules about URLs and data. Our [website redesign checklist](https://kyvrel.com/blog/website-redesign-checklist) covers the general steps. These are the parts specific to Webflow.

1. **Export everything.** Crawl the live site for URLs and metadata, and export each CMS collection to CSV. Download assets, since image URLs on the Webflow CDN will stop being yours.
2. **Model the content.** Map each Webflow collection and field to the new CMS schema. Fix the structure where it was a workaround.
3. **Import with a script.** Move items and rich text through a script, not copy-paste. Rich text needs cleanup: embeds, custom code blocks and inline styles.
4. **Rebuild templates as components.** Each Webflow template becomes a page layout, and repeated sections become reusable blocks.
5. **Recreate interactions on purpose.** Keep the animations that help understanding and drop the ones that only add weight.
6. **Set up redirects** for every URL that changes. Webflow collection URLs often follow a `/collection/item` pattern you may want to change.
7. **Run both sites in parallel** on staging until content, links and forms match.

![Migration flow from Webflow export to content modeling, scripted import, rebuilt templates and redirects](https://kyvrel.com/blog/inline/webflow-to-nextjs-migration-1.png)

### Redirects in Next.js

For a marketing site, redirects can live in the Next.js config. A typical pattern for a changed blog path looks like this:

```ts
// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  async redirects() {
    return [
      { source: "/post/:slug", destination: "/blog/:slug", permanent: true },
      { source: "/about-us", destination: "/about", permanent: true },
    ];
  },
};

export default nextConfig;
```

For hundreds of one-off redirects, generate this list from your URL map instead of writing it by hand.

## Protecting SEO and analytics

Search traffic usually survives a platform change if URLs, content and metadata are handled carefully. What causes drops is missing redirects, removed content and broken internal links.

- Keep titles, descriptions and headings on ranking pages unless you have a reason to change them.
- Generate the XML sitemap and canonical tags from the CMS, and check them on staging.
- Recreate structured data that Webflow added, plus anything you were adding by hand.
- Move analytics, consent and conversion events before launch, and test each event.
- Watch Search Console daily for two weeks after launch, then weekly.

## Costs and timeline

A Webflow to Next.js migration is closer to a rebuild than a copy. On a typical build, design is reused or refreshed, development and content import are new work, and SEO migration is its own task.

- **A marketing site with a blog** usually fits our [website redesign](https://kyvrel.com/products/website-redesign) package: from $9,500 for 8 page templates, 5-6 weeks, SEO migration included.
- **Extra templates** have a fixed, published price each, and **each extra language** adds 12% of the base and extra template cost.
- **A CMS setup** is $2,000. **SEO migration** is included in a redesign and costs $1,500 as an add-on elsewhere.

As a worked example, a 10-template site moved to Next.js with a headless CMS, in one language, comes to $12,300.

Ongoing costs change too. You stop paying for Webflow site plans and seats, and start paying for hosting, a CMS plan and some maintenance time. For many teams the totals are similar. What changes is what you control.

## Plan your move to Next.js

If two or more of the triggers above apply, it is worth getting a scoped plan. Our [website redesign service](https://kyvrel.com/products/website-redesign) covers a Next.js rebuild end to end: content modeling, the CMS, the rebuild and SEO migration, with a fixed price and weekly demos on staging.

If you are still deciding, start with the numbers in [Webflow vs a custom Next.js website](https://kyvrel.com/compare/webflow-vs-custom) and come back when one path is clearly cheaper for you.