Wat is Next.js? En waarom is het zo populair?

Next.js in de sweetspot

Dankzij Javascript kunnen ontwikkelaars veel meer met een website doen dan standaard mogelijk is met HTML en CSS. En doordat Next.js een framework is van Javascriptonderdelen die je als ontwikkelaar niet steeds zelf hoeft te ontwikkelen, bespaart het tijd bij het bouwen van een complexe website. Als ontwikkelaar wordt je gereedschapskist dus een stuk uitgebreider, maar hoef je niet telkens het wiel opnieuw uit te vinden.

Als je bij jezelf denkt: heb ik ooit wel eens een Next.js website gezien? Je kijkt er nu naar. Onze website heeft als interface Next.js. Deze interface wordt gevoed door een backend gebaseerd op Drupal. Daarnaast zijn veel grote websites en apps die veel interactie met de bezoeker hebben gebouwd met Next.js. Denk aan Facebook, Instagram, Uber, Whatsapp en PayPal.

Statisch vs dynamisch

Next.js is vooral sterk in het creëren van dynamische interfaces. Normaliter bestaat de voorkant van een webpagina uit HTML en CSS. De HTML bepaalt waar wat staat en de CSS geeft de juiste kleuren en fonts aan. De onderliggende techniek van veel CMS-systemen zoals Drupal, Joomla en Wordpress is PHP. Alle drie deze systemen kunnen niet dynamisch reageren op wat de bezoeker doet zonder dat de pagina herladen wordt.

De Javascriptonderdelen binnen het Next.js-framework bepalen hoe de website wordt opgebouwd en kunnen reageren op wat de bezoeker doet. En dat is wat het dynamische gevoel creëert voor de bezoeker.  Het maakt een website niet alleen aantrekkelijker, maar ook makkelijker en soepeler in gebruik. 

Denk aan het slepen van een agenda-item naar een andere dag of het selecteren van filters bij een zoekfunctie. De zoekresultaten worden direct aangepast zonder dat je telkens de pagina hoeft te herladen. Dit zijn kleine voorbeelden die we dagelijks voor lief nemen maar zonder Javascript niet mogelijk zijn.

Next.js is decoupled, sneller en duurzamer

Bij de meeste CMS-systemen zijn de voorkant en achterkant met elkaar verbonden en bepaalt de applicatie (Joomla, Drupal, Wordpress, etc.) ook hoe de voorkant van de website wordt ingericht en werkt. 

Met Next.js creëer je een interface die los staat van de techniek en de data. Dat wordt ook wel 'decoupled' genoemd, en dat loskoppelen biedt een hoop voordelen. Zo is een Next.js-interface vrijwel altijd sneller dan de interface van een standaard CMS omdat de voorkant en achterkant van een website niet meer op elkaar hoeven te wachten.

Natuurlijk moet de Next.js-interface zo nu en dan verversen en controleren of de data inmiddels niet is aangepast, of moet het nieuwe data terugsturen naar de applicatie ter controle. 

Maar in tegenstelling tot wat veel CMS-en doen, namelijk de gehele cachelaag wissen en opnieuw opbouwen, biedt Next.js de mogelijkheid om een klein gedeelte te verversen, zelfs op detailniveau in een pagina. Denk bijvoorbeeld aan het voorraadniveau van producten in een grote webshop of de beschikbaarheid van vliegtickets.

Door alleen die waardes te controleren en te vervangen waarvan het belangrijk is dat ze geregeld ververst moeten worden, bespaart dit enorm op de druk die op een server gelegd wordt. Dit in tegenstelling tot wanneer de gehele cachelaag geleegd wordt en alle pagina’s opnieuw opgebouwd moeten worden. 

Met name bij grote of complexe websites biedt Next.js een enorm voordeel waardoor er bespaard kan worden op de belasting van de server(s). Minder servers die minder energie gebruiken betekent een duurzamere oplossing.

Wie mooi wil zijn…

De flexibiliteit van Next.js is misschien ook wel meteen het grootste nadeel. Als er genoeg tijd en budget is, dan is vrijwel alles mogelijk. Waarbij we voorheen nog wel eens tegen een grens aanliepen van een CMS, is die grens er nu niet meer doordat de interface losstaat van de applicatie die erachter zit. 

Tel daarbij op dat er meer technische kennis nodig is om Next.js-websites te ontwikkelen en er eigenlijk altijd een groot tekort is aan dit soort specialistische kennis, dan is de rekensom snel gemaakt: een Next.js-website is duurder dan een standaard HTML/CSS-website, zowel in de initiële bouw als het onderhoud ervan. Vandaar dat bij de keuze voor Next.js goed gekeken moet worden of de voordelen (sneller, duurzamer, kostenbesparend op hostingniveau) opwegen tegen de hogere ontwikkelkosten.

Next.js en Drupal: het beste van twee werelden

Hoewel Next.js vaak wordt vergeleken met traditionele CMS’en zoals WordPress of Drupal, hoeft het geen vervanger te zijn. Sterker nog: Next.js en Drupal vormen samen juist een krachtige combinatie.

Drupal wordt dan gebruikt als headless CMS of decoupled backend. Dat betekent dat Drupal nog steeds alle content beheert (denk aan pagina’s, producten, nieuwsitems of gebruikersdata), maar dat het niet meer de voorkant van de website genereert. Die taak neemt Next.js over. Via een API (meestal in JSON) levert Drupal de content op een nette en gestructureerde manier aan, en Next.js zorgt dat het er snel, dynamisch en interactief uitziet voor de gebruiker.

Waarom Drupal als backend?
Drupal is bij uitstek geschikt voor dit soort setups vanwege zijn sterke contentmodel, flexibele structuur en uitgebreide rechten- en workflowsysteem. Het biedt een gebruiksvriendelijke interface voor redacteuren en marketeers, terwijl ontwikkelaars aan de slag kunnen met de frontend in Next.js – zonder beperkingen in vormgeving of gedrag.

Concrete voordelen van een Next.js + Drupal setup:

• Snel en schaalbaar: de interface is razendsnel, terwijl je profiteert van Drupal’s kracht in contentbeheer.
• Veilig: de frontend draait los van de backend, wat het risico op directe aanvallen op je CMS verkleint.
• Toekomstbestendig: Drupal is helemaal klaar voor een decoupled aanpak en biedt out-of-the-box JSON:API en GraphQL-integraties.
• Multisite en meertaligheid: Drupal is bijzonder geschikt voor complexe meertalige sites of platformen met meerdere submerken – en dat alles blijft centraal beheerd.

Bij Emble passen we deze combinatie toe bij projecten waar performance, UX en contentbeheer allemaal op hoog niveau moeten functioneren. Een voorbeeld daarvan is Jobboard een banen website die wij voor de Universiteit van Amsterdam hebben ontwikkeld, die draait op een Next.js-frontend en een Drupal-backend. Zo kunnen zij nieuwe content eenvoudig publiceren via Drupal, terwijl bezoekers profiteren van een razendsnelle en moderne interface.

Meer weten over hoe wij als Drupal specialist Next.js en Drupal combineren?

Samenvattend

Next.js is een fantastische techniek en wordt steeds meer aangenomen als de leidende front-endtechniek waarmee grote websites worden ontwikkeld. En dan hebben we het eigenlijk over de allergrootste websites ter wereld: Facebook, Instagram, Discord, Whatsapp, Netflix, Uber, The New York Times, Reddit, Airbnb, Salesforce en Wordpress.org, waarbij de interfaces allemaal in Next.js of React zijn gemaakt. 

• Next.js-websites bieden meer mogelijkheden om dynamische content en interactie aan te bieden. Denk aan de interactieve interface van web.whatsapp.com of Netflix. 
• Next.js websites zijn veel sneller. Met name bij grote websites met veel content en bezoekers wordt dit heel snel voelbaar en bespaart het flink in de hostingkosten.
• In tegenstelling tot zelf Javascript schrijven biedt Next.js een compleet framework aan met basisfuncties waardoor je sneller kunt ontwikkelen.
• Next.js is duurzamer bij website met grote aantallen bezoekers. Door de besparing op hostingkosten kost een Next.js website minder energie dan een traditionele website.
• De ontwikkeltijd wordt korter bij grotere websites omdat er meer gewerkt wordt met sjablonen die je kunt hergebruiken.

Wil je meer te weten komen over Next.js en React? Luister dan ook naar onze podcast over Next.js waarin we praten met Jordi Fuite, front end developer bij Emble en Next.js expert.

Heb je vragen over React of Next.js, ik beantwoord ze graag in het reactie gedeelte onderaan deze pagina.