Wat is Next.js?

Definitie: Next.js is een open source framework voor het bouwen van webapplicaties en websites met React, ontwikkeld door het bedrijf Vercel. Het voegt aan React onder meer routing, rendering op de server, het vooraf genereren van pagina’s en API-routes toe, zodat je een complete applicatie in één project bouwt.

In het kort

• Next.js verscheen in 2016 en is gebouwd bovenop React, de interfacebibliotheek van Meta die in 2013 uitkwam.
• Waar React alleen de interface verzorgt, levert Next.js ook routing, servercode en verschillende manieren om pagina’s te maken: op de server, vooraf bij het bouwen of in de browser.
• Pagina’s die op de server of vooraf worden gemaakt, laden snel en zijn beter vindbaar in zoekmachines dan een React-app die alleen in de browser wordt opgebouwd.
• Next.js is gratis en open source; je kunt het hosten bij Vercel, maar ook bij andere aanbieders of op een eigen server.

Wat is Next.js?

React is een populaire bibliotheek om interactieve schermen te bouwen uit componenten. Maar React is bewust beperkt: het regelt alleen wat de gebruiker ziet. Hoe een adres in de browser naar de juiste pagina leidt, hoe gegevens van de server worden opgehaald, hoe pagina’s vindbaar worden voor Google en hoe je de applicatie online zet, moet je zelf regelen met losse bibliotheken en instellingen.

Next.js bundelt die keuzes in één framework. Je schrijft nog steeds React-componenten, maar Next.js zorgt voor de structuur eromheen. Een map met bestanden wordt automatisch een set pagina’s met adressen. Code die gegevens ophaalt, kan op de server draaien in plaats van in de browser. En pagina’s kunnen al op de server worden opgebouwd, zodat de bezoeker direct een complete pagina ziet.

Het framework wordt ontwikkeld door Vercel, een Amerikaans bedrijf dat ook een hostingplatform aanbiedt. Next.js is open source en wordt door een grote gemeenschap gebruikt en uitgebreid. Volgens Riseup Labs is versie 16 de huidige stabiele versie, met Turbopack als standaard bouwtool. De naam wordt geschreven als Next.js, maar ook als NextJS of Next.

Next.js vs React: wat is het verschil?

Het belangrijkste verschil: React is een bibliotheek, Next.js een framework dat React gebruikt. Je kiest dus niet echt tussen de twee. Wie Next.js gebruikt, gebruikt ook React.

Riseup Labs vat het zo samen: React past goed bij single page applications en dashboards met veel maatwerk, Next.js bij sites en applicaties waarbij vindbaarheid en laadsnelheid zwaar wegen, zoals webshops en platforms met veel content. Innowise noemt in een eenvoudige test een eerste zichtbare inhoud na 0,9 seconden bij Next.js tegenover 2,9 seconden bij een gewone React-opzet. Zulke cijfers hangen sterk af van de opzet en zijn geen algemene regel.

Hoe werkt Next.js?

Routing op basis van mappen

In Next.js bepaalt de mappenstructuur van je project de adressen van de pagina’s. Een map klanten met daarin een paginabestand wordt automatisch bereikbaar op /klanten. Een map met een variabele naam, zoals een id tussen haakjes, maakt dynamische pagina’s mogelijk, bijvoorbeeld /klanten/42 voor één specifieke klant. Je hoeft geen aparte routeringsbibliotheek in te richten.

Next.js kent twee manieren van routing: de oudere Pages Router en de nieuwere App Router. De App Router is gebouwd rond React Server Components en is voor nieuwe projecten de gangbare keuze.

Verschillende manieren van renderen

Renderen is het opbouwen van de HTML van een pagina. Next.js biedt meerdere manieren, die je per pagina kunt kiezen:

AppSeed legt uit dat bij SSR pagina’s op de server worden gemaakt en als HTML naar de browser gaan, wat laadtijd en vindbaarheid verbetert, en dat SSG pagina’s al tijdens het bouwen aanmaakt voor zeer snelle laadtijden. Volgens FastComet is SSG de snelste vorm, omdat de pagina kan worden hergebruikt en via een CDN wordt geleverd.

Servercomponenten

Met React Server Components draait een deel van de componenten alleen op de server. Zo’n component kan direct gegevens uit een database of API ophalen, zonder dat die code of gevoelige sleutels naar de browser gaan. Alleen het resultaat wordt naar de gebruiker gestuurd. Dat maakt pagina’s lichter en houdt geheime gegevens op de server.

API-routes en server actions

Next.js laat je ook servercode schrijven binnen hetzelfde project. Met API-routes maak je eindpunten die andere applicaties of je eigen voorkant kunnen aanroepen, bijvoorbeeld om een formulier op te slaan. Daardoor kun je een kleinere applicatie bouwen zonder aparte backend. Bij grotere systemen wordt Next.js vaak gecombineerd met een losse backend, bijvoorbeeld in Node.js of Laravel.

Ingebouwde optimalisaties

AppSeed noemt verder automatische code splitting, waarbij een pagina alleen de code laadt die ze nodig heeft, ondersteuning voor verschillende manieren van styling en ingebouwde ondersteuning voor TypeScript. Daarnaast optimaliseert Next.js afbeeldingen en lettertypes, wat de laadsnelheid ten goede komt.

Hoe start je een Next.js-project?

1. Installeer Node.js. Next.js draait op Node.js; je hebt een recente LTS-versie nodig.
2. Maak een nieuw project aan met het officiële startcommando. Je kiest daarbij onder meer of je TypeScript, een stylingoplossing en de App Router wilt gebruiken.
3. Start de ontwikkelserver. Je ziet de applicatie lokaal in de browser, en wijzigingen verschijnen direct.
4. Maak pagina’s aan door mappen en bestanden toe te voegen in de app-map.
5. Koppel gegevens, bijvoorbeeld een database of een bestaande API, via servercomponenten of API-routes.
6. Zet de applicatie online bij een hostingplatform of op een eigen server.

Voor een ontwikkelaar die React kent, is de stap naar Next.js klein. Het grootste verschil zit in het denken over wat op de server en wat in de browser draait.

Waarvoor gebruik je Next.js?

• Websites die goed vindbaar moeten zijn, zoals marketingsites, kennisbanken en blogs.
• Webshops, waar laadsnelheid en vindbaarheid direct invloed hebben.
• SaaS-producten en webapplicaties met een publiek deel en een deel achter een inlog.
• Klantportalen en dashboards, waarbij gegevens veilig op de server worden opgehaald.
• Platforms met veel content die regelmatig wordt bijgewerkt.
• Prototypes en eerste versies van webapplicaties, omdat voor- en achterkant in één project kunnen.

Veel AI-app builders, zoals v0 van Vercel, genereren code in Next.js. Dat maakt Next.js ook relevant voor wie een prototype met zo’n tool laat maken en dat later wil laten doorontwikkelen. Een gegenereerd prototype is een vertrekpunt, geen af product. Voordat echte gebruikers ermee werken, moet iemand de code beoordelen op beveiliging, rechten, gegevensopslag en onderhoudbaarheid. Omdat Next.js breed bekend is, kan een ontwikkelaar die code wel lezen en verder brengen.

Voorbeeld: publieke pagina’s en een afgeschermd deel

Neem een bedrijf dat een klantportaal wil met daarnaast informatiepagina’s die in Google gevonden moeten worden. In Next.js ziet dat er zo uit:

1. Informatiepagina’s over diensten en veelgestelde vragen worden vooraf gegenereerd. Ze laden direct en zoekmachines zien de volledige tekst.
2. Een kennisbank met honderden artikelen gebruikt incrementele regeneratie. Wordt een artikel aangepast, dan wordt alleen die pagina opnieuw gemaakt.
3. Het inlogdeel wordt per verzoek op de server opgebouwd. Een servercomponent haalt de projecten van de ingelogde klant op uit de database; de databasegegevens komen nooit in de browser.
4. Interactieve onderdelen, zoals een filter op de projectlijst of een uploadknop, draaien in de browser.
5. Een formulier voor nieuwe aanvragen slaat gegevens op via een server action of API-route en stuurt een melding naar de juiste medewerker.

Zo combineer je in één project een snelle, vindbare website met een beveiligd portaal.

Next.js en vindbaarheid

Een React-applicatie die alleen in de browser wordt opgebouwd, stuurt eerst een bijna lege pagina naar de bezoeker. Pas als het JavaScript is geladen, verschijnt de inhoud. Zoekmachines kunnen daar steeds beter mee omgaan, maar het blijft een omweg, en voor bezoekers met een trage verbinding duurt het langer voor ze iets zien.

Next.js stuurt bij voorgerenderde pagina’s direct complete HTML mee, inclusief titels, beschrijvingen en gestructureerde gegevens. Riseup Labs noemt dat het grootste verschil met React op het gebied van vindbaarheid. Daarnaast biedt Next.js hulpmiddelen om per pagina metadata in te stellen, een sitemap te genereren en afbeeldingen te optimaliseren, wat bijdraagt aan laadsnelheid.

Next.js en andere frameworks

Wikipedia noemt Next.js en React Router als aanbevolen opties om full-stack applicaties met React te bouwen.

Voordelen van Next.js

• Alles in één project. Routing, rendering, servercode en optimalisatie zijn ingebouwd.
• Snelle pagina’s door rendering op de server en vooraf gegenereerde pagina’s.
• Goede vindbaarheid, omdat zoekmachines complete HTML-pagina’s te zien krijgen.
• Flexibel per pagina. Je kiest per pagina de rendermethode die past.
• Groot ecosysteem. Alles wat voor React bestaat, werkt ook in Next.js.
• Veel ontwikkelaars. Innowise schat het aantal ontwikkelaars dat Next.js gebruikt op ongeveer twee miljoen.

Nadelen en aandachtspunten

• Meer structuur, minder vrijheid. Riseup Labs noemt Next.js meer opinionated dan React: je werkt binnen de afspraken van het framework.
• Leercurve. Het onderscheid tussen server- en browsercode, en de verschillende rendermethoden, vraagt begrip.
• Snelle ontwikkeling. Grote versies brengen regelmatig nieuwe werkwijzen, zoals de overstap van Pages Router naar App Router. Dat vraagt onderhoud.
• Langere bouwtijden bij grote projecten met veel vooraf gegenereerde pagina’s.
• Hosting vraagt aandacht. Niet elke functie werkt bij elke hostingpartij even soepel; sommige functies werken het makkelijkst bij Vercel.

Hosting van een Next.js-applicatie

Next.js kun je op verschillende plekken laten draaien. AppSeed noemt Vercel, Netlify, AWS en Heroku als mogelijke platforms.

Kijk bij de keuze ook naar de regio waar gegevens worden verwerkt, de kosten bij groeiend verkeer en hoe afhankelijk je wilt zijn van één aanbieder.

Wanneer kies je Next.js en wanneer niet?

Next.js is een logische keuze als vindbaarheid en laadsnelheid belangrijk zijn, als een applicatie zowel publieke pagina’s als een inlogdeel heeft, of als je voor- en achterkant voor een kleinere applicatie in één project wilt houden.

Een andere keuze ligt meer voor de hand bij een interne tool die alleen achter een inlog draait en waar vindbaarheid geen rol speelt; daar is een eenvoudiger React-opzet met Vite soms genoeg. Ook als een applicatie vooral zware backendlogica heeft, past een aparte backend in een framework als Laravel vaak beter, eventueel met Next.js of React als voorkant. En voor een eenvoudige informatieve website is een CMS meestal sneller en goedkoper.

Wat kost Next.js?

Next.js zelf is gratis en open source. De kosten zitten in de ontwikkeling, de hosting en het onderhoud. Innowise noemt als factoren die de prijs van een Next.js-project bepalen de grootte van het team, de complexiteit, het samenwerkingsmodel en de duur van het project. Voor hosting zijn er gratis instapniveaus bij verschillende platforms; bij meer verkeer, meer teamleden of meer servergebruik lopen de kosten op. Reken ook op onderhoud: Next.js en React krijgen regelmatig nieuwe versies, en een applicatie moet daarop worden bijgewerkt.

Waar let je op als je een Next.js-applicatie laat bouwen?

1. Vraag welke router wordt gebruikt. Voor een nieuw project ligt de App Router voor de hand.
2. Vraag welke rendermethode per type pagina wordt gekozen, en waarom.
3. Vraag waar de applicatie wordt gehost, en of alle gebruikte functies daar werken.
4. Vraag hoe gegevens en sleutels veilig op de server blijven.
5. Spreek af hoe updates van Next.js worden bijgehouden, en hoe vaak de applicatie wordt bijgewerkt naar een nieuwe versie.
6. Vraag naar TypeScript en tests, voor betere onderhoudbaarheid.
7. Zorg dat je toegang hebt tot de broncode en de hostingomgeving.
8. Vraag hoe inloggen en rechten zijn geregeld, zodat elke gebruiker alleen ziet wat voor hem bedoeld is.

Veelgemaakte fouten met Next.js

• Alles in de browser renderen, waardoor de voordelen voor snelheid en vindbaarheid verloren gaan.
• Geheime sleutels in browsercode zetten, terwijl die op de server horen.
• Een complexe backend volledig in API-routes bouwen, terwijl een aparte backend overzichtelijker was geweest.
• Updates lang uitstellen, waardoor de overstap naar een nieuwe versie steeds groter wordt.
• Hosting pas aan het eind kiezen, en dan ontdekken dat een gebruikte functie daar niet werkt.

Wat betekent dit voor jouw project?

Next.js is een stevige basis voor webapplicaties waarin vindbaarheid, snelheid en een combinatie van publieke en afgeschermde pagina’s samenkomen. Maar de techniek is niet het vertrekpunt. Ik wil vooraf duidelijk hebben wat we met een eerste versie bedoelen: wie gaat het gebruiken, en welke taak moet die persoon als eerste kunnen afronden?

Daarna kijk ik welke techniek daarbij past. Soms is dat Next.js, soms een framework als Laravel met een eenvoudiger voorkant, soms een bestaand pakket. Belangrijk is dat je kiest voor gangbare, goed gedocumenteerde techniek, zodat een andere ontwikkelaar later kan aansluiten.

Wil je een webapplicatie of portaal laten bouwen? Stuur me voor wie het is, wat er nu gebeurt en wat de eerste versie moet oplossen. Dan bepalen we samen de logische eerste stap. Lees ook hoe ik een webapplicatie bouw.

Veelgestelde vragen over Next.js

Wat is Next.js?

Next.js is een open source framework van Vercel om webapplicaties en websites met React te bouwen. Het voegt routing, rendering op de server, vooraf gegenereerde pagina’s en API-routes toe aan React.

Wat is het verschil tussen Next.js en React?

React is een bibliotheek die alleen de gebruikersinterface verzorgt. Next.js is een framework bovenop React dat ook routing, servercode en rendering op de server levert, waardoor pagina’s sneller laden en beter vindbaar zijn.

Is Next.js frontend of backend?

Next.js is vooral een frontendframework, maar het bevat ook backendmogelijkheden zoals API-routes en servercomponenten. Voor kleinere applicaties kan het de hele applicatie dragen; bij grotere systemen wordt het vaak gecombineerd met een aparte backend.

Verwante termen

React · Node.js · TypeScript · v0 · Framework · Webapplicatie