U heeft uw site gebouwd op Webflow. In het begin werkte dat prima. Inmiddels loopt u tegen beperkingen aan: CMS-restricties, performanceproblemen en ontbrekende functies waarvoor creatieve omwegen nodig zijn. Next.js is een logische volgende stap.
Een migratie van Webflow naar Next.js is goed te overzien als de scope vooraf helder is. De complexiteit schuilt in de details: het gaat niet om een simpele export en import. Dit is hoe het proces er in de praktijk uitziet.
Wanneer een migratie zinvol is
Niet elke Webflow-site hoeft te migreren. Een eenvoudige marketingpagina die een designer maandelijks bijwerkt, functioneert prima op Webflow. Een migratie is zinvol wanneer:
- Uw CMS-behoeften de 10.000-itemlimiet van Webflow overschrijden of het rigide datamodel knelt
- U echte i18n nodig heeft, niet Webflows beperkte lokalisatie
- Aangepaste functies (authenticatie, dashboards, APIs) meer vereisen dan embed-blokken
- Mobiele PageSpeed-scores belangrijk zijn voor SEO en u niet boven de 70 uitkomt
- Uw maandelijkse kosten voor Webflow en externe tools de migratiekosten overstijgen
Wat u achter u laat en wat u wint
| Aspect | Webflow | Next.js |
|---|---|---|
| Hosting | Webflow-servers | Vercel / AWS / elke CDN |
| CMS | Ingebouwd (beperkt) | Headless CMS, MDX of bestandsgebaseerd |
| Styling | Visuele builder | Tailwind, CSS Modules of elke CSS-aanpak |
| Formulieren | Webflow Forms (beperkt) | Aangepaste formulieren met elke backend |
| Animaties | Webflow Interactions | Framer Motion, GSAP, CSS-animaties |
| Aangepaste logica | Embed-blokken en externe tools | Native code, geen beperkingen |
Het migratieproces
Stap 1: Content-audit (1-2 dagen)
Exporteer uw Webflow CMS-data als CSV. Inventariseer elke pagina, collectie en asset. Bepaal welke content behouden blijft, wat herstructurering vraagt en wat vervalt. Dit is ook het moment om op te schonen: de meeste sites bevatten pagina's die geen doel meer dienen.
Stap 2: Designvertaling (2-5 dagen)
Het bestaande design blijft intact. De visuele uitkomst verandert niet. Wat wel verandert, is de onderliggende technologie. Een developer zet uw Webflow-componenten om naar React-componenten. Animaties worden opnieuw gebouwd met Framer Motion of CSS.
Dit is ook het moment om designproblemen op te lossen waarmee u al langer leeft. Responsive breakpoints die niet helemaal kloppen, layout shifts op mobiel, inconsistente witruimte: al deze punten worden tijdens de vertaling aangepakt.
Stap 3: CMS-inrichting (1-3 dagen)
Uw content heeft een nieuwe thuis nodig. Opties zijn een headless CMS zoals Sanity of Contentful, Markdown/MDX-bestanden in de repository of een aangepaste contentstructuur. De keuze hangt af van wie content moet bewerken en hoe vaak.
Voor de meeste zakelijke sites is bestandsgebaseerde content met een beheerde bewerkingsservice de eenvoudigste en meest kosteneffectieve aanpak.
Stap 4: Bouwen en testen (3-7 dagen)
De Next.js-site wordt gebouwd, getest op alle apparaten en geoptimaliseerd voor performance. Elke pagina wordt vergeleken met de Webflow-versie om te controleren of niets ontbreekt. Formulieren, integraties en trackingscripts worden opnieuw aangesloten.
Stap 5: SEO-migratie (1 dag)
Dit is de stap waar de meeste vragen over bestaan. De sleutel is URL-pariteit. Elke bestaande URL blijft hetzelfde of krijgt een correcte 301-redirect. Metadata, Open Graph-tags en gestructureerde data worden overgedragen. Bij een correct uitgevoerde migratie met goede redirect-mapping en behoud van hreflang is het verlies van rankings doorgaans minimaal en tijdelijk; sommige sites zien hun rankings al binnen enkele weken verbeteren dankzij de performancewinst.
Stap 6: Lancering en monitoring (1 dag)
DNS-switch, SSL-verificatie, eindtest en monitoring. De cutover duurt voor sites met hoofdzakelijk content en weinig complexe integraties doorgaans minder dan een uur. Search Console en analytics worden de eerste twee weken nauwlettend gevolgd om eventuele problemen vroeg te signaleren.
Planning en kosten
Een typische Webflow-naar-Next.js-migratie neemt 2 tot 4 weken in beslag van start tot lancering. Eenvoudige sites (minder dan 20 pagina's, minimaal CMS) zijn sneller gereed. Complexe sites met intensief CMS-gebruik, meerdere integraties of aangepaste functionaliteit vragen meer tijd.
| Complexiteit | Planning | Gebruikelijke investering |
|---|---|---|
| Eenvoudig (5-15 pagina's, geen CMS) | 1-2 weken | 2.000-4.000 dollar |
| Gemiddeld (15-50 pagina's, CMS-collecties) | 2-3 weken | 4.000-8.000 dollar |
| Complex (50+ pagina's, integraties, i18n) | 3-5 weken | 8.000-15.000 dollar |
Wat er voor uw team verandert
De grootste aanpassing betreft het bewerken van content. De visuele editor van Webflow verdwijnt. Afhankelijk van de gekozen opzet verlopen contentwijzigingen via een headless CMS-dashboard of via een beheerde bewerkingsservice waarbij u wijzigingen doorstuurt en deze binnen 24 tot 48 uur live gaan.
Al het overige verbetert. De site is sneller, veiliger en goedkoper te hosten. Nieuwe functies worden als code gebouwd in plaats van samengesteld met embed-blokken en externe tools.
Veelgestelde vragen
"Verlies ik mijn SEO-rankings?" Niet als de migratie URL-redirects en metadata correct afhandelt. Hierover is een uitgebreid artikel beschikbaar: de korte samenvatting is dat een juist uitgevoerde migratie rankings behoudt en ze vaak verbetert.
"Kan ik content nog zelf aanpassen?" Ja, via een headless CMS of een beheerde bewerkingsservice. De visuele drag-and-drop verdwijnt, maar de mogelijkheid om tekst, afbeeldingen en pagina's te wijzigen blijft.
"Wat gebeurt er met mijn Webflow-animaties?" Die worden opnieuw gebouwd. Framer Motion en GSAP kunnen alles wat Webflow Interactions biedt, en meer. De animaties presteren vaak beter omdat ze zijn geoptimaliseerd voor de specifieke implementatie.
Het beslissingskader
Breng uw huidige Webflow-kosten in kaart: hostingplan, workspace-seats, overschrijdingen bij formulierinzendingen, externe tools en ontwikkeltijd voor omwegen. Vergelijk dat met de eenmalige migratiekosten plus de minimale doorlopende hostingkosten.
Veel bedrijven zien de migratiekosten binnen 6 tot 12 maanden terugverdiend door lagere platformkosten en conversieverbetering; de terugverdientijd hangt af van het verkeersvolume en de eerdere kosten. Daarna stapelen de besparingen zich op terwijl de mogelijkheden van de site blijven groeien.