Van Webflow naar Next.js — en waarom wij het deden

We gebruikten Webflow voor de website van AI Survivors. Het werkte prima. De visuele editor was fijn, de templates zagen er goed uit, en we stonden snel online.

Toen gingen we rekenen.

€50 per maand voor het hosten van een grotendeels statische website. Trage laadtijden. Geen echte controle over performance. Een CMS dat stroperig aanvoelde voor snelle updates. En elke keer dat we iets net even anders wilden, liepen we vast.

Dus zijn we overgestapt naar Next.js. Self-hosted. Markdown-gebaseerd CMS. Volledige controle. Hier is precies hoe we het gedaan hebben — en waarom jij het misschien ook wilt.

Waarom we weg zijn gegaan bij Webflow

Laat me eerlijk zijn: Webflow is een goed product. Voor veel bedrijven is het de juiste keuze. Maar bij ons stapelden de pijnpunten zich op:

Kosten

Webflow's CMS-plan kost zo'n €40-50 per maand. Onze nieuwe setup? Praktisch gratis — we hosten op infrastructuur die we toch al hebben. Dat is €600 per jaar bespaard op één tool.

Performance

Onze Webflow-site scoorde rond de 70 op Google PageSpeed. Prima, niet geweldig. Onze Next.js-site scoort 95+. Dat verschil is geen ijdelheidscijfer — het beïnvloedt SEO-rankings, gebruikerservaring en conversieratio's.

Snelheid van content publiceren

Een blogpost updaten in Webflow betekende: designer openen, naar het CMS navigeren, in hun editor bewerken, publiceren, wachten op de build. Totale tijd: 5 tot 10 minuten voor een simpele tekstwijziging.

Nu? Ik open een Markdown-bestand, pas het aan, push naar Git. De site herbouwt in seconden. Nog beter — met onze AI agents kunnen we content programmatisch genereren en publiceren. Probeer dat maar eens met Webflow's CMS.

Flexibiliteit

We wilden custom componenten, interactieve tools (zoals onze AI Survival Scan) en API-integraties toevoegen. In Webflow vereiste elk custom feature workarounds, embeds of third-party tools. In Next.js bouwen we het gewoon.

De migratie: stap voor stap

Dit is het daadwerkelijke proces dat we gevolgd hebben. Als je dezelfde stap overweegt, is dit je draaiboek.

Stap 1: Audit je huidige site

Voordat we ook maar één regel code aanraakten, brachten we alles in kaart:

• Alle pagina's en hun URL's — echt allemaal, inclusief blogposts
• Contentstructuur — wat is statisch, wat is dynamisch (CMS)
• Formulieren en integraties — contactformulieren, nieuwsbriefinschrijvingen, analytics
• SEO-metadata — titels, beschrijvingen, OG-images per pagina
• Huidig verkeer — welke pagina's krijgen het meeste traffic (breek die niet)

We exporteerden alles naar een spreadsheet. Saai maar essentieel.

Stap 2: Kies je stack

Onze stack:

• Next.js 14 met App Router — het framework
• MDX — Markdown met JSX-componenten voor blogcontent
• Tailwind CSS — styling
• Self-hosted — deployment op eigen infrastructuur
• Git — versiebeheer én contentmanagement

Waarom MDX? Omdat blogposts gewoon bestanden zijn. Geen database, geen CMS om te onderhouden, geen vendor lock-in. Je kunt een post schrijven in elke tekstverwerker, en AI-tools kunnen content direct als Markdown-bestanden genereren.

Stap 3: Herbouw het design

Dit is waar de meeste mensen schrikken, maar het valt mee:

1. Screenshot elke pagina van je Webflow-site
2. Identificeer herbruikbare componenten — header, footer, cards, CTA's, hero-secties
3. Bouw componenten in React/Next.js — begin met de layout, dan individuele secties
4. Match het design pixel-perfect of pak de kans om te verfrissen

Wij gebruikten de migratie als kans om ons design te vereenvoudigen. Minder animaties, strakkere layout, snellere laadtijden. De volledige herbouw kostte zo'n week gefocust werk.

Stap 4: Migreer de content

Voor statische pagina's was het handmatig kopiëren naar React-componenten. Voor blogposts:

1. Exporteer content uit Webflow (of kopieer gewoon de tekst)
2. Converteer naar MDX-bestanden met frontmatter:

---
title: "Je Post Titel"
description: "Een pakkende meta-beschrijving"
date: "2026-03-22"
dateModified: "2026-04-06"
author: "Mitchell van Rijkom"
image: "/images/blog/je-afbeelding.jpg"
tags: ["tag1", "tag2"]
---

# Je Post Titel

Je content hier in Markdown...

3. Plaats afbeeldingen in je public directory
4. Stel de dynamische routing in Next.js in om MDX-bestanden te renderen

We schreven een simpel script om onze Webflow blog-exports batch-gewijs naar MDX te converteren. Scheelde uren.

Stap 5: Stel 301-redirects in (cruciaal voor SEO)

Dit is de stap die de meeste mensen overslaan, en het vernietigt hun SEO. Elke oude URL moet doorverwijzen naar de nieuwe.

In Next.js voeg je redirects toe aan je next.config.js:

async redirects() {
  return [
    {
      source: '/blog/oude-webflow-slug',
      destination: '/blog/nieuwe-slug',
      permanent: true, // 301 redirect
    },
    // ... al je oude URL's
  ]
}

De regels:

• Breng elke oude URL in kaart naar z'n nieuwe equivalent
• Gebruik 301 (permanent) redirects, geen 302
• Dien je nieuwe sitemap in bij Google Search Console direct na lancering
• Monitor op 404's in de weken na de migratie

Wij verloren nul organisch verkeer tijdens onze migratie, omdat we dit goed gedaan hebben.

Stap 6: Handel formulieren en integraties af

Webflow-formulieren zijn makkelijk maar locked-in. Wij vervingen ze door:

• React Hook Form voor formulierafhandeling
• API routes in Next.js voor formulierverzending
• Directe integratie met onze CRM/e-mailtools

Dit gaf ons juist meer controle — custom validatie, conditionele velden en directe API-calls naar onze backend.

Stap 7: Deploy en monitor

Ons deploymentproces:

1. Push naar main branch
2. Automatische build en deploy via CI/CD
3. Site live in minder dan 60 seconden

Na de lancering monitoreden we:

• Google Search Console voor crawlfouten en indexering
• Analytics voor verkeerspatronen
• PageSpeed Insights voor performance
• Uptime monitoring voor betrouwbaarheid

De resultaten

Na drie maanden op Next.js:

Is dit iets voor jou?

Ja, als:

• Je €30-50+ per maand betaalt voor wat eigenlijk een statische site is
• Je volledige controle wilt over performance en features
• Jij of je team met code kan werken (of je hebt een dev-partner)
• Je custom functionaliteit nodig hebt die verder gaat dan wat Webflow biedt
• Je wilt dat AI-tools automatisch content genereren en publiceren

Nee, als:

• Je geen enkele technische kennis hebt en geen dev-partner
• Je site echt complex is met overal Webflow-specifieke logica
• Je je site één keer per jaar aanpast en performance je niet boeit
• Je tevreden bent met de kosten en beperkingen

Het grotere plaatje

Deze migratie past in onze bredere filosofie bij AI Survivors: wees eigenaar van je infrastructuur, verminder afhankelijkheden, en bouw voor snelheid.

In het SURVIVE framework valt dit onder Evolve — je tools en processen continu aanpassen. De bedrijven die overleven zijn niet degenen die vastzitten aan dure platformen en dingen op de oude manier doen. Het zijn de bedrijven die constant evalueren, optimaliseren en vooruitgaan.

Webflow heeft ons goed gediend. Next.js dient ons beter. Over een jaar is er misschien weer iets beters. Het punt is niet de specifieke tool — het is de bereidheid om te evolueren.

Hulp nodig bij je migratie?

Als je overweegt om van Webflow (of een ander no-code platform) over te stappen naar een custom stack, neem contact met ons op. We hebben het zelf doorgemaakt, kennen de valkuilen en kunnen je helpen de overstap te maken zonder traffic of je verstand te verliezen.

Je website is je etalage. Zorg dat die van jou is.