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

Next.js is een open source React/Javascript-framework waarmee je de interface van een website of applicatie kunt bouwen. Zie het als een geavanceerde gereedschapskist met tools die je in staat stellen om nog flexibelere websites te kunnen bouwen dan een standaard CMS zoals Wordpress of Drupal dat toelaat.

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.

Meer over Next.js development

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.