How to Move Your Website from Webflow to Next.js (And Why We Did It)

We used Webflow for our website at AI Survivors. It worked fine. The visual editor was nice, the templates looked good, and it got us live quickly.

Then we started doing the math.

€50/month for hosting a mostly-static website. Slow page loads. No real control over performance. A CMS that felt sluggish for quick content updates. And every time we wanted to do something slightly custom, we hit a wall.

So we moved everything to Next.js. Self-hosted. Markdown-based CMS. Full control. Here's exactly how we did it — and why you might want to do the same.

Why We Left Webflow

Let's be fair: Webflow is a great product. For many businesses, it's the right choice. But for us, the pain points stacked up:

Cost

Webflow's CMS plan runs around €40-50/month. Our new setup? Essentially free — we host on infrastructure we already have. That's €600/year saved on just one tool.

Performance

Our Webflow site scored in the 70s on Google PageSpeed. Decent, not great. Our Next.js site scores 95+. The difference isn't just a vanity metric — it affects SEO rankings, user experience, and conversion rates.

Content Speed

Updating a blog post in Webflow meant: open the designer, navigate to the CMS, edit in their editor, publish, wait for the build. Total time: 5-10 minutes for a simple text change.

Now? I open a Markdown file, make the edit, push to Git. The site rebuilds in seconds. Even better — with our AI agents, we can generate and publish content programmatically. Try doing that with Webflow's CMS.

Flexibility

We wanted to add custom components, interactive tools (like our AI Survival Scan), and API integrations. In Webflow, every custom feature required workarounds, embeds, or third-party tools. In Next.js, we just build it.

The Migration: Step by Step

Here's the actual process we followed. If you're considering the same move, this is your playbook.

Step 1: Audit Your Current Site

Before touching any code, we cataloged everything:

• All pages and their URLs — every single one, including blog posts
• Content structure — what's static, what's dynamic (CMS)
• Forms and integrations — contact forms, newsletter signups, analytics
• SEO metadata — titles, descriptions, OG images for every page
• Current traffic patterns — which pages get the most traffic (don't break these)

We exported everything into a spreadsheet. Boring but essential.

Step 2: Choose Your Stack

Our stack:

• Next.js 14 with App Router — the framework
• MDX — Markdown with JSX components for blog content
• Tailwind CSS — styling (we were already using it mentally with Webflow classes)
• Vercel / Self-hosted — deployment (we chose self-hosted on our own infrastructure)
• Git — version control and content management

Why MDX? Because blog posts are just files. No database, no CMS to maintain, no vendor lock-in. You can write a post in any text editor, and AI tools can generate content directly as Markdown files.

Step 3: Rebuild the Design

This is where most people get scared, but it's simpler than you think:

1. Screenshot every page of your Webflow site
2. Identify reusable components — header, footer, cards, CTAs, hero sections
3. Build components in React/Next.js — start with the layout, then individual sections
4. Match the design pixel-by-pixel or take the opportunity to refresh

We used the migration as a chance to simplify our design. Fewer animations, cleaner layout, faster loads. The whole rebuild took about a week of focused work.

Step 4: Migrate Content

For static pages, this was manual copy-paste into React components. For blog posts:

1. Export content from Webflow (or just copy the text)
2. Convert to MDX files with frontmatter:

---
title: "Your Post Title"
description: "A compelling meta description"
date: "2026-03-22"
author: "Mitchell van Rijkom"
image: "/images/blog/your-image.jpg"
tags: ["tag1", "tag2"]
---

# Your Post Title

Your content here in Markdown...

3. Place images in your public directory
4. Set up the dynamic routing in Next.js to render MDX files

We wrote a simple script to batch-convert our Webflow blog exports to MDX. Saved hours.

Step 5: Set Up 301 Redirects (Critical for SEO)

This is the step most people skip, and it destroys their SEO. Every old URL must redirect to the new one.

In Next.js, add redirects to your next.config.js:

async redirects() {
  return [
    {
      source: '/blog/old-webflow-slug',
      destination: '/blog/new-slug',
      permanent: true, // 301 redirect
    },
    // ... all your old URLs
  ]
}

Key rules:

• Map every old URL to its new equivalent
• Use 301 (permanent) redirects, not 302
• Submit your new sitemap to Google Search Console immediately after launch
• Monitor for 404s in the weeks after migration

We lost zero organic traffic during our migration because we got this right.

Step 6: Handle Forms and Integrations

Webflow forms are easy but locked in. We replaced them with:

• React Hook Form for form handling
• API routes in Next.js for form submission
• Direct integration with our CRM/email tools

This actually gave us more control — custom validation, conditional fields, and direct API calls to our backend.

Step 7: Deploy and Monitor

Our deployment:

1. Push to main branch
2. Automatic build and deploy via CI/CD
3. Site live in under 60 seconds

After launch, we monitored:

• Google Search Console for crawl errors and indexing
• Analytics for traffic patterns
• PageSpeed Insights for performance
• Uptime monitoring for reliability

The Results

After three months on Next.js:

Should You Do This?

Yes, if:

• You're paying €30-50+/month for what's essentially a static site
• You want full control over performance and features
• You or your team can work with code (or you work with a dev partner)
• You need custom functionality beyond what Webflow offers
• You want AI tools to generate and publish content automatically

No, if:

• You have no technical capability at all and no dev partner
• Your site is genuinely complex with Webflow-specific logic everywhere
• You update your site once a year and don't care about performance
• You're happy with the cost and limitations

The Bigger Picture

This migration fits into our broader philosophy at AI Survivors: own your infrastructure, reduce dependencies, and build for speed.

In the SURVIVE framework, this falls under Evolve — continuously adapting your tools and processes. The businesses that survive aren't the ones locked into expensive platforms doing things the old way. They're the ones that constantly evaluate, optimize, and move forward.

Webflow served us well. Next.js serves us better. In a year, something else might serve us better still. The point isn't the specific tool — it's the willingness to evolve.

Need Help With Your Migration?

If you're considering moving from Webflow (or any no-code platform) to a custom stack, reach out to us. We've been through it, we know the pitfalls, and we can help you make the transition without losing traffic or sanity.

Your website is your storefront. Make sure you own it.