Can I keep writing blog posts in MDX after moving to Webflow?

Not directly. Webflow CMS edits content in its own editor, so MDX files in a repo won't publish to it. If engineers want to keep writing in MDX, you could sync files to Webflow through the Data API with a script, but most teams switch authors to the Webflow editor, which is the main reason to move in the first place.

How long does a Next.js to Webflow migration take?

It depends mostly on page templates and content volume, not the framework. A handful of templates and a modest blog moves much faster than a site with several relational collections and many locales. Plan time for content conversion and QA, not only the design build. We scope timelines on the intro call after looking at the site.

Do Webflow redirects work for every old Next.js URL?

Webflow's hosting settings support 301 redirects, including pattern-based rules for whole folders. That covers most migrations. Very large or complex redirect sets can be harder to manage there, so keep paths identical wherever possible. If you use a proxy in front of Webflow, you can also handle redirects at the edge instead.

Can Webflow and our Next.js app share analytics?

Yes. Use the same analytics property or tag manager container on both, and configure cross-subdomain tracking if the app lives on app.example.com. That keeps sign-ups from marketing pages attributed correctly. Recreate conversion events on the Webflow side, because form submissions and button clicks that were tracked in code won't carry over automatically.

All posts

Platform migrations

Next.js to Webflow Migration for Marketing Teams

Next.js to Webflow migration for marketing teams: map MDX or headless CMS content to Webflow CMS fields, import it cleanly, and keep the app separate.

By Mehdi HassanOct 29, 20267 min read

The short answer

A Next.js to Webflow migration rebuilds your marketing pages in Webflow and moves MDX or headless CMS content into Webflow CMS collections, while the product app stays on Next.js. The hard part is content: map every field to a Webflow field type, convert rich text to HTML, re-host images, then import by CSV or the Data API.

Key takeaways

Webflow suits marketing teams with structured, relational content: references and multi-references work.
Map every MDX front-matter field or headless CMS field to a Webflow field type before you build.
Rich text must arrive as clean HTML. Portable Text, Contentful rich text and MDX all need converting.
Import referenced collections first, such as authors and categories, then match them by slug.
Keep the app on Next.js at app.example.com; serving Webflow under a subfolder needs a proxy.

Part of Moving From Code to a Visual Builder: Next.js or React to Framer or Webflow

How do you migrate a Next.js marketing site to Webflow?

You migrate a Next.js marketing site to Webflow by rebuilding the pages in Webflow's Designer, recreating your content model as Webflow CMS collections, importing the content, and pointing your domain at Webflow while the app stays on Next.js. There's no import for code, so layouts are rebuilt and content is moved as data.

Webflow is the right destination when your marketing team edits a lot of structured content: blog posts with authors and categories, customer stories linked to industries, integrations pages, resources. It handles relationships between content better than most visual builders. For the broader choice between builders and staying in code, read our hub on moving from code to a visual builder.

This guide focuses on the step that decides whether the migration feels clean or messy: getting MDX files or headless CMS entries into Webflow CMS without losing structure.

What should stay on Next.js when you move to Webflow?

The product app, authentication, API routes and anything that reads from your database stay on Next.js. Webflow takes the public marketing pages, the blog and landing pages.

The cleanest split puts Webflow on example.com and the app on app.example.com. If you need the app at example.com/app, you'll need a reverse proxy in front of both, and Webflow's support for serving under a proxy depends on your plan, so check Webflow's current terms first. We compare the setups in splitting your marketing site from your app.

Docs are the grey area. Developer docs written in MDX often stay in code or move to a docs tool, because engineers write them and they rely on code samples and versioning. Moving them into Webflow CMS is possible but rarely worth it.

How do you map MDX or headless CMS content to Webflow CMS?

Map content by listing every field in your current source, front matter in MDX or fields in Contentful, Sanity or Payload, and assigning each one a Webflow field type. Do this in a spreadsheet before building any templates, because the template depends on the fields.

Source field	Typical source format	Webflow CMS field
Title, slug, excerpt	Front matter or text fields	Name, Slug, Plain text
Body	MDX, Portable Text or Contentful rich text	Rich text (as HTML)
Cover image	Local file path or asset ID	Image (public URL at import)
Publish date	ISO date string	Date/Time
Author	Reference or front-matter string	Reference to an Authors collection
Tags or categories	Array of strings or references	Multi-reference
Featured flag	Boolean	Switch
SEO title and description	Front matter or SEO fields	Plain text, bound to page settings

If your old model has fields nobody uses, drop them now. A migration is the cheapest moment to simplify. A field that was added for one campaign two years ago doesn't need a home in Webflow, and neither does a category with two posts in it.

Converting MDX, Portable Text and Contentful rich text

Webflow's rich-text field takes HTML: headings, paragraphs, lists, links, images, quotes and embeds. Anything else needs converting.

MDX: render each post to HTML with your existing Markdown pipeline, then replace custom components. A callout component can become a blockquote; an interactive demo becomes an embed or is dropped.

Sanity Portable Text and Contentful rich text are JSON structures. Both have official HTML serializers you can run in a script. Map custom block types to plain HTML equivalents before export, and check a sample of converted posts by eye.

What are the steps in a NextJS to Webflow migration?

A Next.js to Webflow migration has eight steps. Content work runs alongside the design build, not after it.

Crawl and benchmark
Export every URL, top pages, rankings and conversions so you can compare after launch.
Audit pages and posts
Decide what to keep, merge, rewrite, redirect or delete before anything is rebuilt.
Map the content model
Assign every source field a Webflow field type and decide collection structure and URL paths.
Build templates in Webflow
Create a class system, page templates and CMS template pages bound to your new fields.
Convert and clean content
Export MDX or CMS entries, convert rich text to HTML, and host images at public URLs.
Import in dependency order
Import authors and categories first, then posts that reference them, by CSV or the Data API.
Rebuild SEO settings
Bind SEO fields to page settings, add schema, set 301 redirects in Webflow's settings for changed paths.
Launch and monitor
Move DNS, publish, submit the sitemap and watch Search Console and form submissions.

CSV import or Data API: which should you use?

Use CSV import for small, simple collections and the Webflow Data API for anything large, relational or rich-text heavy. Many migrations use both: CSV for authors and categories, the API for posts.

Pros

CSV import needs no code and is fine for flat collections
The Data API handles references, rich text and images more reliably
Scripts can be rerun, so you can fix and reimport quickly
The API lets you publish items in batches after review

Cons

CSV import can mangle rich-text images and complex HTML
References in CSV must match existing items exactly
The API needs a developer and respects rate limits
Both need the collection structure finished first

Whichever route you pick, run a test import of ten items first, publish them to a staging domain, and compare them with the live posts. Webflow's own Data API documentation covers the endpoints for collection items, and its help center documents the CSV importer.

How do you protect SEO when moving from Next.js to Webflow?

You protect SEO by keeping URL paths, metadata and content stable, then redirecting only what you've changed. Webflow serves server-rendered HTML, so crawling is rarely the issue; lost settings and changed paths are.

Match paths. Webflow CMS pages live under a collection path. Name collections so /blog/post-name stays /blog/post-name.
Recreate metadata. Titles and descriptions from Next.js code must be entered or bound in Webflow's page settings.
Add schema. Article, FAQ and organization schema need custom code in page settings or templates.
Check performance. Core Web Vitals change with the platform. Our guide to Core Web Vitals for Framer, Webflow and Next.js lists Webflow-specific fixes.

If your Next.js site rendered content in the browser, the move to Webflow can lift visibility for crawlers that don't run JavaScript, which we explain in server-side rendering for AI crawlers.

Is Webflow the right destination for your Next.js site?

Webflow is right if your team publishes structured content often and wants a strong CMS with references. Framer is often better for design-led teams focused on landing pages; see our Next.js to Framer migration guide.

Check Webflow's current pricing before committing. Its May 2026 change merged the CMS and Business plans into a single Premium tier, and seats add to the bill, so check the current pricing page against your item count and team size. If you're moving the other way, our Webflow to Next.js migration guide covers that direction.

Frequently asked questions

Can I keep writing blog posts in MDX after moving to Webflow?: Not directly. Webflow CMS edits content in its own editor, so MDX files in a repo won't publish to it. If engineers want to keep writing in MDX, you could sync files to Webflow through the Data API with a script, but most teams switch authors to the Webflow editor, which is the main reason to move in the first place.
How long does a Next.js to Webflow migration take?: It depends mostly on page templates and content volume, not the framework. A handful of templates and a modest blog moves much faster than a site with several relational collections and many locales. Plan time for content conversion and QA, not only the design build. We scope timelines on the intro call after looking at the site.
Do Webflow redirects work for every old Next.js URL?: Webflow's hosting settings support 301 redirects, including pattern-based rules for whole folders. That covers most migrations. Very large or complex redirect sets can be harder to manage there, so keep paths identical wherever possible. If you use a proxy in front of Webflow, you can also handle redirects at the edge instead.
Can Webflow and our Next.js app share analytics?: Yes. Use the same analytics property or tag manager container on both, and configure cross-subdomain tracking if the app lives on app.example.com. That keeps sign-ups from marketing pages attributed correctly. Recreate conversion events on the Webflow side, because form submissions and button clicks that were tracked in code won't carry over automatically.

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, written and 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