Herbouw WordPress naar Next.js met AI | door Peter van Barneveld

AI codeertools hebben veranderd wat mogelijk is in een weekend. Ik bouwde mijn persoonlijke website opnieuw, van WordPress naar een snelle statische Next.js site op Cloudflare Pages, in slechts 6 uur. Een AI agent handelde het meeste coderen af. Het resultaat is een merkbaar snellere, modernere site die makkelijker te onderhouden is.

Dit gaat niet over ontwikkelaar worden. Het gaat over moderne tools die de kloof tussen het hebben van een betere website en het daadwerkelijk creëren van een website verkleinen. Als je een kleine persoonlijke site op WordPress draait, kan deze aanpak je verrassen met wat haalbaar is in een enkel weekend.

Waarom Overstappen van WordPress naar Statische Next.js?

WordPress werkte, maar voelde verouderd aan. Voor een kleine persoonlijke site kostte het bewerken en onderhouden meer tijd dan zou moeten. Delen van de site waren traag, deels door hostingbeperkingen.

Een statische Next.js site lost deze problemen op. Statisch betekent dat de pagina's vooraf gebouwde bestanden zijn. Geen database-queries, geen serververwerking. Het resultaat is razendsnel laden en doodsimpele hosting. Next.js geeft je moderne ontwikkeltools terwijl het nog steeds naar statische bestanden exporteert. En met een AI codeer assistent hoef je geen React-expert te zijn om er een te bouwen.

Welke Tools Heb Je Echt Nodig?

Dit maakte dit project mogelijk in 6 uur:

AI codeeragent (ik gebruikte Google Antigravity): Doet het eigenlijke coderen, handelt Git-commando's af, bouwt de sitestructuur
Ontwikkelomgeving: Ik draaide Antigravity in WSL (Windows Subsystem for Linux) via VS Code. Enige bekendheid met Linux, Bash of VS Code helpt omdat je werkt tussen de editor, terminal en browser
ChatGPT of vergelijkbare AI assistent: Voor "hoe werkt dit?" vragen, vooral rond deployment en DNS
Cloudflare Pages (gratis tier): Hosting die automatisch deployt wanneer je codewijzigingen pusht
GitHub: Slaat je code op en triggert automatische builds
Domeinnaam: Als je er al een hebt (zoals ik van WordPress), wijs je die gewoon naar Cloudflare's DNS

Antigravity zit momenteel in preview met royale gratis credits. Ik bouwde mijn site opnieuw en voltooide nog een project met slechts één week's toewijzing. Als de gratis tier beperkter wordt, is Visual Studio Code met de Claude extensie (die een Pro-abonnement kan gebruiken) een goed alternatief voor projecten die niet te groot zijn.

Antigravity heeft een vertrouwde VS Code-achtige interface (het is gebouwd op VS Code) plus een Agent Manager die fungeert als missiecontrole voor je AI agents. Deze combinatie maakt het zowel vertrouwd als verrassend capabel.

Voordat ik met het eigenlijke coderen begon, besprak ik de aanpak met mijn AI assistent. We bespraken het ontwerp voor een eenvoudige aanpak met een modern ontwerp, componenten die goed samenwerken en uitermate geschikt zijn voor Cloudflare Pages. Deze uitkomst van het gesprek vormde de ontwerpspecificaties voor de hele bouw.

De technische stack eronder: Next.js, TypeScript, Tailwind CSS. Content leeft direct in configuratiebestanden. Simpel en overzichtelijk voor een kleine site. Je bewerkt tekst in TypeScript objecten in plaats van te dealen met een apart contentmanagementsysteem. Maar hier is het punt: je hoeft deze technologieën niet diepgaand te kennen. De AI handelt de implementatie af. Jij focust op wat je wilt.

Wat Is Het Eigenlijke Proces?

De herbouw gebeurde in twee hoofdfases.

Fase 1: De site bouwen (4 uur)

Ik begon met het delen van de link naar mijn WordPress site met de AI coding agent. Het analyseerde de layout en genereerde een Next.js versie geïnspireerd op die structuur. Toen kwam het leuke deel: de layout verfijnen, het ontwerp aanpassen en content herschrijven.

Eén uitdaging: ik kon de mobiele versie niet lokaal testen. Na de eerste deployment werkten sommige layoutkeuzes niet goed op mobiel. Mijn beeldweergave en tussenruimte klopten niet. Maar ik kon dit fixen met simpele AI instructies en een snelle git push. De hele fix-deploy cyclus duurde minuten, niet uren.

De eerste build werkte verrassend goed. Niet "proof of concept" kwaliteit. Echt goed. Dat zette de toon voor de rest van het project.

Fase 2: Publiceren en migratie (2 uur)

Dit deel had een steilere leercurve. Publiceren naar Git, Cloudflare Pages verbinden, DNS updaten. Sommige delen kende ik, andere waren geen parate kennis meer, en sommige waren compleet nieuw.

Gelukkig handelde Antigravity de Git-workflow volledig af. Ik was de exacte commando's vergeten, maar ik kon het gewoon instrueren: "push deze wijzigingen naar GIT" en de stappen werden uitgevoerd.

Voor Cloudflare Pages configuratie en DNS-migratie had ik wat hulp nodig van mijn ChatGPT assistent. Mijn huidige domein voor mijn WordPress setup hoefde ik alleen te verhuizen naar Cloudflare's DNS. Het goede nieuws: Cloudflare kopieerde automatisch mijn hele DNS-configuratie toen ik overstapte. Ik wees mijn domein gewoon naar Cloudflare's nameservers en alles kwam over. Mijn AI assistent leidde me door de wat lastigere stappen en beantwoordde mijn "hoe werkt dit eigenlijk?" vragen.

Het hebben van die tweede AI assistent voor infrastructuurvragen terwijl de codeeragent focuste op bouwen was verrassend effectief.

Welke Uitdagingen Kun Je Verwachten?

De leercurve is niet alleen code, het is de ontwikkelomgeving en deployment

Het Next.js bouwen verliep soepel omdat de AI het handelde. De uitdagende delen waren comfortabel worden met de development setup (WSL, VS Code, terminal workflows) en deployment concepten (repositories verbinden, build settings configureren, DNS propagatie). Als deze omgevingen nieuw voor je zijn, reserveer dan extra tijd voor deze leercurve. Een AI assistent helpt, maar je moet nog steeds begrijpen wat je configureert.

Beoordeel voordat je iets belangrijks uitvoert

AI suggesties zijn vaak solide, maar ik beoordeelde commando's altijd voordat ik ze uitvoerde, vooral alles wat Code, Cloudflare, Git raakte. Dit gaat niet over gebrek aan vertrouwen; het gaat over controle houden over je project. Hetzelfde geldt voor de gegenereerde code zelf. AI kan beveiligingskwetsbaarheden introduceren zoals ontbrekende inputvalidatie of onveilige dependencies, dus beoordelen wat ingezet wordt is belangrijk. Na dit project ga ik verder uitzoeken hoe ik mijn website beter kan beveiligen.

Cloudflare Pages heeft build-limieten op de gratis tier

Het gratis plan beperkt het aantal builds per maand. Dit is perfect voor een kleine persoonlijke site die niet vaak verandert. Het is daarom wenselijk om eerst lokaal te testen en dan pas een batch wijzigingen ineens te pushen, in plaats van elke kleine edit.

Wanneer Kan Deze Aanpak Werken?

Deze methode werkt goed als:

Je WordPress site eigenlijk een persoonlijke website is met een paar secties
Je een snellere, modernere site wilt
Je bereid bent een weekendproject met AI assistentie te proberen
Je geen WordPress features zoals gebruikerslogin of complexe plugins nodig hebt

Houd rekening met:

Je hebt tijd nodig om de ontwikkelomgeving en deployment workflow te leren
Content updates vereisen Git commits in plaats van een visuele editor
Deze aanpak werkt het beste voor sites die je zelf controleert

Wat Is Het Echte Resultaat?

De site voelt merkbaar sneller en de updates zijn makkelijk door te voeren. Bewerk de tekst direct in de repository, of vraag AI om de tekst te wijzigen, waarbij een simpele nieuwe git push ervoor zorgt dat de site is bijgewerkt. Ik kon ook eenvoudig mijn vCard download verhuizen, die ik gebruik met een NFC visitekaartje, en SEO is schoner zonder de afhankelijkheid van plugins.

Het belangrijkste: 6 uur om van "mijn WordPress site voelt verouderd" naar "ik heb een moderne, snelle statische site op professionele infrastructuur" te gaan is oprecht indrukwekkend. Die tijd omvat het deels leren van nieuwe tools en concepten.

Het spel is veranderd. AI codeeragents maken projecten zoals dit toegankelijk die daarvoor simpelweg door velen als onmogelijk werden gezien. Je moet nog steeds nadenken over wat je wilt en de resultaten beoordelen. Maar de kloof tussen "ik heb een idee" en "ik heb een werkende site" is enorm verkleind.

Wat Ik Overweeg Om Verder Te Verkennen

Deze eerste versie was ruim voldoende voor mijn beoogde nieuwe site, maar er is meer dat ik zou kunnen verkennen naarmate mijn site evolueert:

Code beveiligingsscanning: AI gegenereerde code kan kwetsbaarheden bevatten zoals ontbrekende inputvalidatie of onveilige dependencies. GitHub's Dependabot controleert automatisch op kwetsbare dependencies en kan pull requests aanmaken om ze te updaten. Het is ingebouwd en makkelijk in te schakelen voor elke repository.

MDX voor interactieve content: Nu leeft content in configuratiebestanden. Simpel en direct. Maar als ik regelmatig artikelen begin te schrijven, zou ik MDX kunnen verkennen. Het is Markdown (simpele tekstopmaak) met de mogelijkheid om React componenten in te bedden. Wil je een calculator, live code demo of interactieve grafiek toevoegen aan een artikel? MDX maakt dat mogelijk terwijl het meeste van je schrijven simpel blijft.

Lichtgewicht analytics: Begrijpen wie de site bezoekt zonder de bloat van traditionele analytics. Services die dus bij voorkeur inzichten geven terwijl ze privacy respecteren.

Ik heb deze nog niet geïmplementeerd, maar ze staan op mijn radar om verder uit te zoeken, ook als behoeften veranderen. De fundering is flexibel genoeg om te groeien.

Over De Auteur

Peter van Barneveld is Group Innovation Manager en verkent praktische wegen naar digitale autonomie. Hij test wat daadwerkelijk werkt in het dagelijks gebruik. Zijn aanpak: uitzoeken, het traject documenteren, eerlijke resultaten delen.

Kom in contact met LinkedIn of join de discussie op r/Dimaginar.

Veelgestelde Vragen

Kan ik dit zonder codeerervaring doen? Je hebt enig begrip voor technische concepten nodig, maar geen codeerexpertise. De AI schrijft de code. Jij stuurt de beslissingen en beoordeelt de resultaten. Als je instructies kunt volgen voor Git-commando's en DNS-instellingen, kun je dit aan. Een AI assistent kan concepten uitleggen terwijl je bezig bent.

Kan ik mijn bestaande WordPress content migreren? Ja. De AI migreerde alle content van mijn WordPress site in de eerste gegenereerde versie. Het haalde automatisch de tekst, structuur en layout op. De bewerkingstijd die ik daarna besteedde was vooral het verfijnen van het sitethema en het herschrijven van wat tekst om de nieuwe richting te matchen, niet het fixen van migratieproblemen.

Hoeveel kost dit eigenlijk? De setup die ik gebruikte kost niets als je binnen gratis tiers blijft:

Antigravity: Gratis credits tijdens preview fase (zeer royaal). Alternatief: VS Code met Claude extensie (werkt met Claude Pro abonnement)
Cloudflare Pages: Gratis tier handelt kleine persoonlijke sites makkelijk af
GitHub: Gratis voor privé en publieke repositories

Je betaalt misschien voor een domeinnaam als je er nog geen hebt (~€15-20/jaar). Dat is het.

Wat als er iets breekt na publicatie? Statische sites zijn verrassend veerkrachtig. Er is geen database om corrupt te raken of plugins om te conflicteren. Als er toch iets breekt, heb je twee veiligheidsnetten. Ten eerste bewaart Git je hele geschiedenis, dus je kunt terugdraaien naar elke vorige versie. Ten tweede, naast lokaal testen kan Cloudflare Pages je wijzigingen tonen voordat je ze live zet. Test eerst, deploy dan met vertrouwen.

Hoe update ik content voor mijn site? Bewerk de tekstbestanden in je repository (met elke teksteditor) en push de wijzigingen. Cloudflare herbouwt en deployt de site automatisch. Of gebruik een AI assistent om je te helpen met de bewerkingen. De workflow wordt snel natuurlijk.

Is dit sneller dan WordPress houden? Voor een kleine persoonlijke site, absoluut. WordPress vereist updates, plugin management en database onderhoud. Een statische site zit er gewoon te werken. Je raakt het alleen aan wanneer je content wilt wijzigen of belangrijke beveiligingsupdates moet doorvoeren.