Op deze pagina
React, plus wat een echte website nodig heeft
Next.js maakt van React, een bibliotheek om schermen te bouwen, iets waar je een hele website op kunt draaien. React alleen bouwt interfaces in de browser. Next.js voegt toe wat een echte site errond nodig heeft: een pagina per adres, pagina's die op de server of bij het bouwen gemaakt worden, beeldverwerking, routering en een build die snelle bestanden oplevert.
Het wordt onderhouden door Vercel, het bedrijf dat ook Next.js-sites host, maar je zit niet vast aan Vercel: een Next.js-site draait op elke server, of als statische export als gewone bestanden op opslag zoals Amazon S3.
Zeit, nu Vercel, in 2016
De eerste versie, 1.0, verscheen op 25 oktober 2016, bij het bedrijf dat toen Zeit heette en nu Vercel. Het idee: React op de server laten renderen moest zo simpel worden als een bestand in een map zetten. In 2022 bracht Next.js 13 een nieuwe structuur, de app-map, met lay-outs en React Server Components; in mei 2023, met versie 13.4, werd die App Router stabiel. Versie 16 volgde in oktober 2025, en daar draaien onze huidige sites op.
Drie manieren om een pagina te maken
Next.js kan een pagina op drie manieren maken. Statisch: bij het bouwen wordt elke pagina een afgewerkt HTML-bestand, klaar nog voor iemand langskomt. Server: de pagina wordt op een server gemaakt op het moment dat iemand ze opvraagt, handig als de inhoud per bezoeker verschilt. Client: delen van de pagina worden in de browser opgebouwd, voor interactieve stukken. Een bedrijfswebsite is meestal het best gediend met volledig statisch: geen server om te onderhouden, en elke pagina komt volledig binnen.
Code, bezoeker en wat het deed voor Villa Lidia
Van code tot bezoeker
- 01Next.js en ReactPagina's als componenten, met de inhoud uit bestanden of een CMS.
- 02BuildElke pagina wordt vooraf kant-en-klare HTML, met beelden in de juiste maten.
- 03CDNDe bestanden staan op S3 achter CloudFront, dicht bij de bezoeker.
Homepage van Villa Lidia, oude en nieuwe build
Voor de herbouw8,4 MB
Next.js static export1,4 MB
Next.js zelf rankt niet. De snelle, volledige HTML die het oplevert, helpt Google en je bezoekers wel.
Goed voor SEO, als je het juist gebruikt
Het eerlijke antwoord: Next.js zelf scoort niet. Google rangschikt pagina's, geen frameworks. Wat Next.js wel doet, is het makkelijk maken om te leveren wat Google en bezoekers nodig hebben: volledige HTML bij de eerste vraag, snelle pagina's, een adres per pagina, een titel en beschrijving per pagina, en gestructureerde gegevens in de code. Google kan JavaScript renderen, maar doet dat in een latere ronde; een pagina die als afgewerkte HTML binnenkomt, wordt meteen gelezen. Voor SEO is dat een voorsprong, geen garantie: inhoud, zoekintentie en links beslissen nog altijd.
| Aanpak | Wat bezoeker en Google eerst krijgen | Snelheid | Onderhoud |
|---|---|---|---|
| Statische Next.js-export | Volledige HTML van een CDN | Heel snel | Geen server, geen plug-ins |
| Next.js op een server | Volledige HTML, per aanvraag gemaakt | Snel | Een server om te draaien |
| WordPress | HTML uit PHP en een database | Hangt af van thema en plug-ins | Updates voor kern, thema en plug-ins |
| Een React-app zonder framework | Een lege pagina, dan JavaScript | Trager eerste beeld | Hangt af van de opzet |
Waarom de sites van onze klanten erop draaien
We bouwen de sites van onze klanten als statische Next.js-export op Amazon S3 achter CloudFront: Business Centrum, SN Group, Villa Lidia en een boekhoudkantoor. Geen server om te patchen, geen plug-ins om bij te werken, en pagina's die overal in Europa snel laden. Bij de herbouw van de site van Villa Lidia ging de homepage van 8,4 MB naar 1,4 MB. Voor Business Centrum, een site in vier talen, gingen de vertoningen in Google in vijf weken van 220 naar 10.200 per dag, waarbij de inhoud en de termenkaart het zware werk deden op een snelle basis.
Gratis software, betaalde hosting en uren
Het framework is gratis en open source. De kost zit in het bouwen: een Next.js-site schrijven developers, je klikt hem niet samen in een paginabouwer, dus hij start hoger dan een template. In ruil kost het hosten van een statische export weinig per maand en vervalt het onderhoud van plug-ins. Wat developers per uur vragen, lees je in het uurtarief van een webdesigner. Wil je pagina's zelf aanpassen, dan komt er een headless CMS bij, zie headless website bureau.
Wat klanten vragen voor een herbouw
Waarom Next.js en niet gewoon React?
React bouwt interfaces; Next.js voegt pagina's, routering, renderen op de server of bij het bouwen en beeldverwerking toe. Voor een publieke website die gevonden moet worden en snel moet laden, zijn dat net de stukken die gewoon React aan jou overlaat.
Is Next.js goed voor SEO?
Het maakt goede SEO makkelijker: volledige HTML per pagina, snel laden en volledige controle over titels en gestructureerde gegevens. Het laat een pagina niet vanzelf stijgen; inhoud en links beslissen nog altijd.
Heb ik Vercel nodig om Next.js te draaien?
Nee. Vercel maakt Next.js en biedt hosting aan, maar een Next.js-site draait op elke server, en een statische export draait als gewone bestanden op opslag zoals Amazon S3 achter een CDN.
Kan ik een Next.js-site zelf aanpassen?
Ja, als hij gekoppeld is aan een contentsysteem. Veel sites bewaren hun inhoud in bestanden of in een headless CMS dat je in de browser bewerkt, terwijl Next.js de pagina's bouwt.