Astro of Next.js: welke kies je voor een AI-website?

Je bouwt een website met een AI-agent en die vraagt: “Moeten we Astro of Next.js gebruiken?” Het antwoord bepaalt hoeveel code de agent schrijft, waar je de site host en hoeveel hosting kost. Beide frameworks zijn gratis, worden actief ontwikkeld en de agent kan met allebei werken. De vraag is met welk framework je daarna wilt werken.

Het volledige proces voor het bouwen van een site met Astro wordt beschreven in een aparte gids. Hieronder vind je een eerlijke vergelijking: waarvoor elk framework is ontworpen, welk framework eenvoudiger is voor een AI-agent, wat hosting kost en hoe je je keuze aan je eigen project kunt toetsen voordat de agent zijn eerste bestand schrijft. De versies en feiten zijn actueel per 12 september 2026: op die datum waren Astro 7.3.2 en Next.js 16.3.5 de actuele versies. Frameworks worden regelmatig bijgewerkt, dus controleer de versienummers opnieuw voordat je gaat bouwen.

Ailoot-referentiedocumentatie: ailoot.ai/docs/.

Dus, welke moet je kiezen? Het korte antwoord#

De aanbevelingen staan samengevat in een tabel. Zoek je taak op: het antwoord staat in de tweede kolom.

Laten we bekijken waar dit verschil vandaan komt.

Waarvoor zijn Astro en Next.js ontworpen?#

De ontwikkelaars van Astro omschrijven het in de documentatie expliciet als een framework voor websites die op content zijn gericht: blogs, marketingsites en webwinkels. Webapplicaties — beheerdashboards, e-mail, sociale netwerken en editors — beschrijven ze als het terrein van andere frameworks. Dit is hun formulering:

Next.js omschrijft zichzelf anders:

Die twee uitspraken verklaren bijna alles wat volgt. Een site die iets “toont” — een portfolio, blog of catalogus — is waarvoor Astro bedoeld is. Een site die iets “doet” — een account, dienst of bedieningspaneel — is waarvoor Next.js bedoeld is.

Hoe is een Astro-site opgebouwd?#

De ontwikkelaars noemen dit eilandarchitectuur. De pagina is statische HTML, terwijl interactieve details als afzonderlijke eilanden “verschijnen”: hier komt een aanvraagformulier tot leven, daar een fotogalerij. Al het andere is een gewone pagina zonder JavaScript. De documentatie zegt het eenvoudig: “Standaard nul JS.”

Voor een website-eigenaar betekent dit drie dingen:

• Snelheid. Standaard wordt er geen JavaScript geladen voor bezoekers. De uiteindelijke snelheid hangt nog steeds af van afbeeldingen, lettertypen en widgets van derden, maar je voegt hier geen zware code toe.
• Eenvoud. Een Astro-paginabestand ziet eruit als gewone HTML met codefragmenten erin. Minder lagen betekent minder instellingen om in gedachten te houden.
• Vrijheid om interactiviteit toe te voegen. Je kunt een eiland bouwen met React, Preact, Vue, Svelte of Solid — Astro ondersteunt de belangrijkste bibliotheken. Maar voor een portfoliosite of blog kun je vaak helemaal zonder.

Er is een apart overzicht van de tool zelf: wat Astro is en waarom het nuttig is voor een door AI gebouwde website. Het volledige bouwproces staat in de gids hoe je met Claude Code een website bouwt met Astro.

Hoe is een Next.js-site opgebouwd?#

De Next.js-documentatie zegt expliciet dat je geacht wordt vertrouwd te zijn met HTML, CSS, JavaScript en React voordat je begint. Dat betekent een steilere leercurve. De complexiteit beïnvloedt ook het werk van de agent: hoe ingewikkelder de projectstructuur, hoe meer kansen er zijn op fouten in instellingen voor rendering en caching. Next.js heeft twee routers: de nieuwere App Router, met Server Components, en de oudere maar nog altijd ondersteunde Pages Router. Online materiaal combineert de twee, dus vertel de agent bij het starten van een nieuw project welke router hij moet gebruiken.

Het voordeel is dat Next.js serverlogica ondersteunt die een website gericht op content niet nodig heeft: een pagina samenstellen voor iedere bezoeker, aanmeldingen en sessies afhandelen en gegevens aanbieden via je eigen API-routes. Als de site een dienst is waarbij iedere gebruiker een ander scherm ziet, werkt al die functionaliteit in je voordeel.

Welk framework is eenvoudiger voor een AI-agent?#

Astro heeft een officiële MCP-server voor de documentatie: die is gratis en draait op afstand. Je hoeft de server zelf niet te installeren; je voegt het adres toe aan de instellingen van de agent, waarna die de actuele Astro-documentatie live kan lezen. Zonder die server vertrouwt de agent op zijn geheugen, dat veroudert. De ontwikkelaars van Astro zeggen expliciet dat AI-tools vaak verouderde werkwijzen aanbevelen en dat de MCP-server is gemaakt om dit aan te pakken.

Next.js biedt iets vergelijkbaars op zijn eigen manier: alle documentatie is beschikbaar in een machineleesbaar formaat op /docs/llms.txt. Geef de agent dat adres voordat hij begint.

“De agent kent het framework niet” is dus geen argument voor de ene of de andere keuze. Het verschil zit in de hoeveelheid werk. Een portfoliosite in Astro bestaat uit slechts enkele bestanden die bijna volledig uit HTML bestaan. Dezelfde site in Next.js vereist React-componenten, een keuze voor een router en beslissingen over renderingsmodi. Een statisch Astro-project heeft minder bewegende delen en is daardoor nu eenvoudiger te controleren en over zes maanden te begrijpen.

Waar kun je het hosten en hoeveel kost het?#

Een statische site wordt één keer gebouwd en daarna als kant-en-klare bestanden opgeslagen. Er is geen “draaiende server” nodig; de bestanden moeten ergens worden aangeboden. Dit is over het algemeen de goedkoopste vorm van hosting: op het moment dat dit artikel werd geschreven, boden GitHub Pages en Cloudflare Pages gratis hosting voor statische sites. Een gewone VPS kan hetzelfde, al moet je daarop de webserver configureren. De gids over een website bouwen met Astro met Claude Code beschrijft het proces vanaf een lege map tot een gratis publicatie.

Next.js ondersteunt ook volledig statische export. Zet output: 'export' in next.config.js en voer het buildscript uit (next build): de map out/ kan door een statische host zonder Node.js-proces in productie worden aangeboden. React en Next.js blijven deel van de build, dus statische hosting neemt de ontwikkelcomplexiteit niet weg.

Statische export levert geen cookies op verzoek, Server Actions, verzoekafhankelijke Route Handlers of ISR; ook de standaardafbeeldingsoptimalisatie vereist een andere configuratie. Dynamische routepaden moeten bij de build bekend zijn. Zijn die serverfuncties nodig, kies dan een ondersteunde runtime of externe dienst en tel de kosten mee. Zie de officiële configuratie en beperkingen voor statische export.

De volledige servermodus werkt in Next.js anders: die heeft een Node.js-proces nodig dat continu op een server draait en pagina’s op verzoek samenstelt. Er zijn twee opties. De eerste is je eigen server: een VPS waarop de agent Node.js installeert en de site draaiende houdt. De tweede is Vercel, het platform van de makers van Next.js: publiceren is daar het eenvoudigst, maar controleer op de dag van lancering de prijzen, limieten en voorwaarden voor commerciële sites — die veranderen. Controleer ook welke betaalmethoden beschikbaar zijn voor de dienst die je kiest; dat is voor dit artikel niet nagegaan.

Astro heeft ook een servermodus en adapters voor Node, Vercel en Cloudflare, voor het geval pagina’s moeten worden samengesteld wanneer een verzoek binnenkomt. Astro kiezen sluit dynamische functies later dus niet uit. Maar wanneer de functionaliteit aan de serverkant uitgebreid wordt, is het verstandiger om Next.js te bekijken.

Wanneer heb je Next.js echt nodig?#

Hier is een eenvoudige test. Stel je voor dat twee bezoekers je site op hetzelfde moment openen. Als ze allebei hetzelfde zien, heb je een website die op content is gericht en zou Next.js onnodige complexiteit toevoegen. Als ze allebei iets anders zien — een saldo, bestellingen of berichten — heb je een applicatie en past Next.js. Dat is één aanwijzing uit meerdere: houd ook rekening met de vraag of je eigen aanmeldingen, serverbewerkingen en gegevensupdates op het moment van het verzoek nodig hebt.

De tweede reden is het team. Als een programmeur het project gaat ontwikkelen, vraag dan vooraf waarmee die werkt: ervaring met React is een argument vóór Next.js. Voor een site die je met één agent beheert, geldt dat argument niet. Voor een project dat met een team uitgroeit tot een product, wel.

Hoe toets je je keuze aan je project?#

Volg deze stappen:

1. Maak een lijst van de pagina’s die je toekomstige site krijgt: home, dienst, blog, artikel, contact — of account, bestellingen, betalingen.
2. Markeer de pagina’s waarop iedere bezoeker eigen content ziet. Als dat er geen zijn, kies dan Astro. Als die pagina’s de kern van het product vormen, overweeg dan Next.js. Je kunt ook één of twee gepersonaliseerde functies toevoegen aan een op content gerichte site die met Astro is gebouwd: via de servermodus of een externe dienst. Bereken de kosten wel vooraf: de servermodus vereist een adapter en serverhosting, terwijl een externe dienst een rekening betekent en dat de gegevens van iemand anders in handen zijn.
3. Vraag de agent één representatieve pagina te bouwen en bekijk het resultaat: hoeveel bestanden heeft hij gemaakt en begrijp je wat erin staat?
4. Vraag de agent waar hij het project wil hosten en bereken de maandelijkse kosten voordat je begint.

De laatste stap geeft vaak de doorslag. Vergelijk Astro-statische uitvoer met Next.js-statische export voor dezelfde pagina’s; vergelijk serverhosting alleen als ze serverfuncties op verzoek nodig hebben. Een Next.js-project vereist niet alleen door de frameworkkeuze een betaalde draaiende server.

Veelgestelde vragen#

Kan ik later overstappen van Astro naar Next.js?

Dat kan, maar in de praktijk betekent het dat je het project opnieuw schrijft: je kunt de markup en tekst overzetten, maar je moet de paginaopbouw opnieuw maken. Daarom is de testpagina in het bovenstaande gedeelte niet zomaar een formaliteit.

Wat moet ik kiezen voor een webwinkel?

Een catalogus en productpagina’s zijn ook content, en Astro kan daar goed mee overweg. Koppel een kant-en-klare dienst of widget voor het winkelmandje en de betalingen. Als de winkel uitgroeit tot een marktplaats met persoonlijke accounts voor verkopers, is het een applicatie geworden en kun je Next.js overwegen.

Wat is een “framework” precies en waarom kan de agent niet zelf beslissen?

Een framework is een kant-en-klare structuur voor een website: een verzameling regels en onderdelen die de agent gebruikt om pagina’s samen te stellen. De agent kan met elk framework bouwen dat je aanwijst. Maar jij moet leven met de gevolgen — hosting, kosten en onderhoud — dus de uiteindelijke beslissing is aan jou.

Een tool kiezen is een van de tientallen beslissingen. Ontdek meer over Ailoot op ailoot.ai.