Migrate Your Webflow Site to Next.js

Next.js is the most popular React framework in the world, and it is a common target when teams outgrow Webflow. But “outgrow” is doing a lot of heavy lifting in that sentence. Many Webflow sites do not actually need Next.js, and choosing it when Astro would suffice means shipping more JavaScript, paying for server-side rendering, and managing more complexity than necessary.

This guide is honest about when Next.js is the right migration target, when Astro is better, and how to execute the migration with either framework. If you are considering leaving Webflow for a React-based codebase, this is everything you need to know.

The honest Next.js vs Astro comparison

This matters because most guides present Next.js as the obvious choice for any Webflow migration. It is not. The right framework depends entirely on what your site does.

When Next.js is the better choice

Next.js is a full-stack React framework. It can do everything Astro can do, plus server-side rendering, API routes, authentication, middleware, and complex client-side interactivity. Choose Next.js when your site needs:

User authentication. Login pages, user dashboards, account settings, protected content. Next.js has mature patterns for this (NextAuth.js, Clerk integration, middleware-based auth).
Server-side rendering. Content that changes per request or per user — personalized pages, A/B testing, geo-targeted content, real-time data.
API routes. Your site needs backend endpoints for form processing, payment handling, webhook receivers, or third-party integrations.
Complex client-side interactivity. Interactive data tables, drag-and-drop interfaces, real-time collaboration features, complex form wizards. Things that require significant React state management.
A React-heavy team. If your engineering team already works in React and Next.js, migrating to Astro means learning a new framework. Sticking with the stack your team knows has real value.
Future plans beyond a marketing site. If you are migrating now but plan to add a customer portal, SaaS dashboard, or app-like features within the next year, starting with Next.js avoids a second migration later.

When Astro is the better choice

Astro is purpose-built for content-driven websites and ships zero JavaScript by default. Choose Astro when:

Your site is a marketing site, blog, portfolio, or documentation site. This is what most Webflow sites are. Astro was designed for this exact category.
Performance is a priority. Astro consistently scores 95-100 on Lighthouse mobile. Next.js typically scores 80-95 because it ships the React runtime (~80KB+) on every page, even pages that have no interactivity.
You want free hosting. Astro sites are fully static and can be hosted for $0/month on Cloudflare Pages (unlimited bandwidth), Vercel, or Netlify. Next.js SSR features require server compute, which has costs (Vercel’s free tier is generous but has limits).
You need a built-in content model. Astro’s content collections map naturally onto Webflow CMS collections — typed schemas, Markdown files, reference fields. Next.js has no built-in content model; you bring your own (MDX, CMS, database).
You want interactive islands without a full React runtime. Astro lets you add React, Vue, or Svelte components to specific sections of a page while keeping the rest as zero-JS HTML.

The direct comparison

	Next.js	Astro
Architecture	Full-stack React framework	Content-focused, ships zero JS
JavaScript shipped	React runtime on every page (~80KB+)	Zero by default; islands when needed
Server-side rendering	Yes (built-in)	Optional (Astro 5 supports SSR)
API routes	Yes	No (use a separate backend or serverless functions)
Content model	Bring your own	Built-in content collections
Typical Lighthouse mobile	80-95	95-100
Hosting cost	$0-$20/month (SSR compute)	$0/month (static)
React ecosystem	Full access	React islands (partial hydration)
Learning curve from Webflow	Steeper (React + Next.js concepts)	Gentler (HTML-like components)
Community size	Very large (React ecosystem)	Growing fast (55K+ GitHub stars)

The bottom line: If your Webflow site is a marketing site or blog with no server-side features, Astro is the better technical choice. If you need server-side rendering, authentication, or complex interactivity — or if your team already works in React — Next.js is the right call.

What changes when you leave Webflow

Regardless of whether you choose Next.js or Astro, here is what the migration changes:

Content management

Webflow CMS: Visual form editor with fields, file uploads, rich text, and reference relationships. Content lives in Webflow’s database. Accessible through the Designer, the published site, or the API.

Next.js / Astro: Content lives in files you own — MDX files (Next.js) or Markdown files (Astro) with YAML frontmatter. Or, if your team needs a visual editor, you can connect a headless CMS (Sanity, Contentful, Tina, Decap CMS) that gives editors a form-based interface while storing content in files or a database you control.

Design workflow

Webflow: Drag-and-drop visual editor. See changes immediately on a canvas. Responsive design through breakpoint controls. The visual editor is genuinely excellent for this.

Next.js / Astro: Write HTML/JSX and CSS in a code editor. Preview through hot-reloading in the browser (changes appear in seconds). Responsive design through CSS media queries or Tailwind breakpoint utilities. More precise control, less visual immediacy.

Hosting and deployment

Webflow: Publish button in the Designer. Webflow handles hosting, CDN, SSL. You cannot use any other host.

Next.js: Most teams deploy to Vercel (free tier available, Next.js is built by Vercel’s team). Also deployable to Netlify, Cloudflare Pages, AWS, or self-hosted.

Astro: Deploy to Cloudflare Pages, Vercel, Netlify, GitHub Pages, or any static host. All free tiers work well for static output.

AI integration

Webflow: AI agents cannot interact with the visual editor. They cannot modify CMS content, adjust designs, or debug interactions through Webflow’s interface.

Next.js / Astro: Every AI coding agent (Claude Code, Cursor, Windsurf, Cline, GitHub Copilot) works natively with code files. They can read your entire codebase, make edits, write new pages, refactor components, fix bugs, and open pull requests. This is arguably the biggest long-term advantage of code over a visual editor.

How to migrate

1. AI coding agents (recommended for most teams)

The most flexible and commonly used approach. An AI coding agent crawls your published Webflow site and rebuilds it in your chosen framework.

For Next.js:

npx create-next-app@latest my-site (choose App Router, TypeScript, Tailwind CSS)
Open in Cursor, Windsurf, or your preferred AI editor
Instruct the agent: “Crawl [your-site.webflow.io] and rebuild it as a Next.js App Router project. Extract all text content and images. Match the visual design using Tailwind CSS. Create MDX files for blog posts.”
The agent creates React page components under app/, React components under components/, MDX content files for blog posts, and downloads images to public/
Iterate — fix styling, responsive behavior, typography
Deploy to Vercel: vercel deploy

For Astro:

npm create astro@latest my-site
Same process, but the agent creates .astro files instead of React components, content collections with schemas, and Markdown files for content
Deploy to Cloudflare Pages or Vercel

Key technical differences in the agent output:

Next.js pages look like this:

// app/about/page.tsx
export default function About() {
  return (
    <main className="container mx-auto px-4 py-16">
      <h1 className="text-4xl font-bold">About Us</h1>
      <p className="mt-4 text-lg text-gray-600">Our story...</p>
    </main>
  );
}

Astro pages look like this:

---
// src/pages/about.astro
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="About Us">
  <main class="container mx-auto px-4 py-16">
    <h1 class="text-4xl font-bold">About Us</h1>
    <p class="mt-4 text-lg text-gray-600">Our story...</p>
  </main>
</BaseLayout>

Both produce the same HTML output for the visitor. The difference is the framework underneath.

Real-world examples: cursor.com was migrated from a headless CMS to code in 3 days for $260 in AI tokens. Prefect.io rebuilt their marketing site in about a week, estimated at 6 weeks traditionally. Most Webflow sites are simpler than these examples.

Cost: $0-$500 in AI tokens. Timeline: 1-5 days.

2. AI app builders

Bolt.new, v0.dev (which generates Next.js code specifically), Lovable, and Replit Agent can generate a codebase from screenshots and conversation.

v0.dev is particularly relevant for Next.js migrations because it generates React components with Tailwind CSS — the exact same stack you would use in a Next.js project. Screenshot your Webflow pages, paste them into v0, and iterate until the components match.

Best for: Getting component designs quickly. The generated components can be dropped into a Next.js or Astro project.

3. Hire a developer or agency

Freelancers ($1,000-$5,000) and agencies ($5,000-$25,000) can handle the full migration. When hiring, be specific about which framework you want and why. A good developer will push back if you are requesting Next.js for a site that does not need it.

Best for: Teams that want a production-ready result without managing the technical process.

4. Automated migration tools

Tools like BrowserCat Migrate and other automated services can extract your Webflow site and produce a deployable codebase. Most automated tools output Astro or static HTML; if you specifically need Next.js, you may need to convert the output or use a different approach.

5. Webflow API + custom build

The Webflow CMS API gives programmatic access to collection items. For large CMS sites, write a script to extract all content:

// Extract Webflow CMS content for Next.js MDX files
const items = await fetchAllCollectionItems(collectionId);

for (const item of items) {
  const mdx = `---
title: "${item.fieldData.name}"
date: "${item.fieldData['published-date']}"
author: "${item.fieldData['author-name']}"
image: "${item.fieldData['featured-image']?.url}"
---

${convertHtmlToMdx(item.fieldData['post-body'])}
`;
  fs.writeFileSync(`content/blog/${item.fieldData.slug}.mdx`, mdx);
}

This handles content extraction. You still build the visual design through one of the other approaches.

6. Manual rebuild

Next.js path:

npx create-next-app@latest (App Router, TypeScript, Tailwind)
Screenshot every Webflow page for design reference
Build React components for each page section
Create MDX content files for blog posts
Implement routing (file-based routing in App Router)
Handle forms with API routes or a service like Formspree
Deploy to Vercel

Astro path:

npm create astro@latest
Same process with Astro components and Markdown content
Deploy to Cloudflare Pages (free, unlimited bandwidth)

Timeline: 2-6 weeks depending on site complexity and your familiarity with the framework.

Webflow-specific migration challenges

CMS collection structure

Webflow CMS collections have typed fields: plain text, rich text, image, video, link, reference, multi-reference, color, switch, date, number. These map to frontmatter fields in Markdown/MDX:

Webflow field type	MDX/Markdown equivalent
Plain text	String in frontmatter
Rich text	MDX body content (or rendered HTML)
Image	URL string (image downloaded to `public/`)
Reference	Slug string referencing another collection
Multi-reference	Array of slug strings
Switch	Boolean in frontmatter
Date	ISO date string
Number	Number in frontmatter
Color	Hex string

The tricky part is rich text fields. Webflow rich text includes styled text, embedded images, lists, headings, and code blocks. Converting this to Markdown is mostly straightforward, but embedded images need to be downloaded and their URLs updated to local paths.

Webflow interactions

Webflow’s interaction system is entirely proprietary. There is no export or conversion path. You rebuild them:

Webflow interaction	Next.js/Astro equivalent
Hover effects	CSS `transition` + `:hover`
Scroll-triggered reveals	`IntersectionObserver` + CSS `@keyframes`, or `framer-motion`
Page load animations	CSS `@keyframes` with `animation` property
Page transitions	Next.js `<Link>` prefetching / Astro View Transitions API
Navbar scroll effects	`useEffect` + scroll listener (React) or `<script>` (Astro)
Tabs / accordion	React component with `useState`, or `<details>` element
Slider / carousel	`swiper`, `embla-carousel`, or similar library
Lottie animations	`lottie-web` or `lottie-react`
Complex multi-step	GSAP or Framer Motion

For Next.js specifically, Framer Motion is the most common animation library and integrates naturally with React components.

Forms

Webflow Forms is built-in. In Next.js, you have more options:

Next.js API route + an email service (Resend, SendGrid): Full control, runs on your server
React Server Actions (Next.js 15+): Handle form submissions directly in server components
Formspree, Getform, Basin: Third-party form endpoints (no backend needed)
Netlify Forms: If hosting on Netlify

In Astro, you do not have API routes by default, so third-party form services or an Astro island with a React form component are the typical approaches.

E-commerce

If your Webflow site uses Webflow E-commerce, the migration is significantly more complex. Next.js is the better target for this case because it supports server-side rendering and API routes needed for:

Shopping cart state
Payment processing (Stripe integration)
Order management
Inventory tracking

Consider Shopify’s Hydrogen framework (built on Remix, similar to Next.js) or using Shopify’s Storefront API with a Next.js frontend if e-commerce is a major part of your site.

Membership and authentication

Webflow Memberships provides gated content and user accounts. In Next.js, you would use:

NextAuth.js (now Auth.js): The most popular authentication library for Next.js
Clerk: Drop-in authentication components
Supabase Auth: If you are using Supabase for your database
Middleware-based auth: Next.js middleware can protect routes at the edge

This is one of the strongest reasons to choose Next.js over Astro for your migration — Next.js has a mature ecosystem for authentication and protected content.

The React ecosystem advantage

One reason teams choose Next.js even when Astro would technically suffice: the React ecosystem.

React has the largest component ecosystem in frontend development. Thousands of production-ready UI component libraries (shadcn/ui, Radix, Headless UI, Chakra), data visualization libraries (Recharts, Nivo, Victory), form libraries (React Hook Form, Formik), and state management solutions (Zustand, Jotai, TanStack Query).

If you think your site might evolve beyond a marketing site — adding a customer portal, interactive tools, dashboards, or app-like features — starting with Next.js gives you immediate access to this ecosystem without a framework change.

Astro can use React components as islands, but it is not a React-first framework. If 80%+ of your pages will have significant React interactivity, Next.js is the more natural choice.

When to stay on Webflow

Next.js and Astro are developer tools. They require someone who can write code. Webflow does not. Be honest about these scenarios:

No developer on the team and no budget to hire one. Webflow’s visual editor is the right tool for non-technical teams.
Design-first workflow. If your team thinks visually and iterates on layout by dragging elements on a canvas, Webflow is faster for that. Editing CSS in a code editor is more precise but less visual.
Webflow’s ecosystem works for you. Webflow University, the community forum, the template marketplace, Webflow Apps — if these are part of your workflow and you would lose them, factor that into the decision.
You are an agency building Webflow client sites. The agency model works. Changing frameworks changes your business model.

Webflow built something genuinely impressive. The decision to leave should be based on specific limitations you are hitting, not on a general sense that “code is better.”

Post-migration workflow

Daily content updates in Next.js

Blog posts are MDX files. Open the file, edit the content, commit, push. Or tell an AI agent: “Write a blog post about our Q2 product launch, following the same format as our other posts.” The agent creates the MDX file, you review, commit, done.

Design changes in Next.js

React components are JSX files with Tailwind classes. Change the markup, change the classes, save. Hot reloading shows the change in your browser immediately. Open a pull request for team review. Deploy preview URL lets stakeholders see the change before it goes live.

Adding new features

This is where Next.js truly differs from Webflow. Need to add a customer portal with authentication? A contact form that saves to a database? An interactive pricing calculator? A webhook endpoint for a third-party integration? These are standard features in Next.js. In Webflow, each of these would require a workaround, a third-party embed, or would not be possible at all.

Getting started

Decide: Next.js or Astro. If your site is purely content (marketing pages, blog, portfolio) and will stay that way, choose Astro for simplicity and performance. If you need server-side features, authentication, or plan to add app-like functionality, choose Next.js.
Inventory your Webflow site. Pages, CMS collections, forms, interactions, e-commerce, memberships. This determines migration complexity.
Choose your approach. AI coding agents for most teams, hire a developer for hands-off execution, manual rebuild for maximum control.
Extract content first. CMS data is the hardest part. Use the Webflow API for large collections, copy-paste for small ones.
Deploy early. Set up Vercel (for Next.js) or Cloudflare Pages (for Astro) early in the process so you can test on real URLs from day one.

The migration is a one-time investment. After that, you own your codebase, you choose your hosting, every AI tool works with your files, and you are building on the largest developer ecosystem in frontend development.