Migrate Webflow to Next.js

The migration in three pieces

From Webflow to a running Next.js site

1. 1

   Export the site

   Paste your Webflow API token into Webflow Export, scan, then download. You'll get a ZIP with rendered HTML, every CMS collection as Markdown / MDX / JSON, and every asset.

2. 2

   Spin up a Next.js project

   npx create-next-app@latest my-site, App Router, TypeScript, Tailwind. Doesn't matter what design system you use — what matters is the directory shape.

3. 3

   Drop in the CMS content

   Move each collection folder from the export into src/content/. Move the assets/ folder into public/ so the relative paths still resolve. The exported Markdown is already shaped to be read by @next/mdx, Contentlayer, or your own loader.

4. 4

   Wire MDX with the App Router

   Use @next/mdx with pageExtensions: ["ts", "tsx", "mdx"]. For collections, write a tiny loader:

   // src/lib/posts.ts
   import { readdirSync } from "node:fs";
   
   export function getPostSlugs() {
     return readdirSync("src/content/blog-posts")
       .filter((f) => f.endsWith(".mdx"))
       .map((f) => f.replace(/\.mdx$/, ""));
   }
   
   export async function getPost(slug: string) {
     const mod = await import(`@/content/blog-posts/${slug}.mdx`);
     return { ...mod.metadata, default: mod.default };
   }

   Then generateStaticParams over getPostSlugs() and you have a working blog with statically generated pages.

5. 5

   Rebuild static pages as React

   Pages without CMS data are the fastest to rebuild. The exported HTML is a useful reference for layout, classes, and copy, but you'll usually rewrite them as React components so they participate in your component library and design tokens.

6. 6

   Carry over the SEO plumbing

   Add a sitemap.ts that walks getPostSlugs(), a robots.ts, and a redirects block in next.config.ts for any URLs that changed shape during the move.

7. 7

   Deploy to Vercel

   vercel --prod. With static content and ISR, the site is faster than the Webflow original and free on the Hobby tier (or Pro if you're commercial). See where to host an exported Webflow site for the alternatives.

What survives, what you rebuild

Performance changes you’ll feel

FAQ — Webflow to Next.js

Do I have to use MDX for the CMS content?

No. The export gives you JSON, Markdown, and MDX side-by-side. If you want to keep content out of MDX, read the JSON in a Server Component and render with plain HTML or a Markdown renderer.

How do I handle reference fields like 'Author' on blog posts?

Reference fields export as slugs. At build time, read the referenced collection into a Map keyed by slug and resolve. Typically a one-line lookup per post.

Can I keep Webflow as the editor and just rebuild the frontend?

Yes — many teams do this. Re-run the export on a schedule (or via webhook) and rebuild the Next.js site. You get a faster frontend without retraining the marketing team. We sometimes call this the “Webflow as headless CMS” pattern.

What about Webflow Interactions — animations, scroll triggers?

The export includes Webflow's JS bundle, but if you're rebuilding as React you'll usually rewrite interactions using Framer Motion, GSAP, or CSS — both because they integrate better and because you don't want a runtime dependency on Webflow's animation engine.

What's the fastest way to migrate just the blog?

Export the site, copy the blog-posts/ folder from the export into src/content/, set up a [slug]/page.tsx route with dynamic import of the MDX file, generateStaticParams over the slugs. About 30 minutes of setup.