Wat is NextJS?

Wanneer je begint met het ontwikkelen van grote webapplicaties zal je al snel gebruik maken van een framework. Front-end frameworks kunnen je namelijk helpen bij het gestructureerd ontwikkelen van snelle, responsieve en schaalbare webapplicaties.

NextJS is dan een framework wat ook zeker de moeite waard is om eens te bekijken. Wanneer je de showcase pagina van NextJS moet geloven wordt dit framework gebruikt door grote bedrijven zoals onder andere Netflix, TikTok & Twitch.

Wat is NextJS?

NextJS is volgens de ontwikkelaars een React framework wat de juiste tools geeft om snelle websites te bouwen. In de basis is het React, dus een open-source javascript framework.

In dit artikel leggen we je uit wat de voordelen zijn van NextJS en waarom het wellicht beter bij jouw project past dan het React framework zelf.

Component-based ontwikkelen

Net zoals React maakt NextJS gebruik van component-based ontwikkelen. Je applicatie wordt opgebouwd uit verschillende stukjes code die componenten heten. Deze componenten kun je vervolgens overal hergebruiken binnen je NextJS project.

Het grootste voordeel is dat je niet zoals bij een klassieke website op elke pagina opnieuw dezelfde code hoeft te typen. Door component-based te werken houdt je je applicatie gestructureerd en kun je ook nog eens front-end ontwikkelen volgens het DRY-principe!

Server-side Rendering (SSR)

Persoonlijk vind ik Server-Side Rendering (SSR) de meeste toegevoegde waarde hebben binnen NextJS. Waar bij React data wordt ingeladen via Client-Side Rendering (CSR) wordt dit bij NextJS op de server gedaan. Net zoals bij bijvoorbeeld een PHP-website wordt de data dus al verwerkt op de server en zo geprepareerd mogelijk naar de client-side gestuurd.

SEO-technisch heeft dit een groot voordeel t.o.v. van client-side rendering. Zoekmachines kunnen CSR-websites interpeteren, alleen dit duurt vaak langer dan SSR-websites. Zo crawlen zoekmachines vaak in eerste instantie alleen de HTML van een webpagina en wordt de webpagina op een later moment ook geladen inclusief alle bronnen zoals Javascript, styling en afbeeldingen.

Bij een CSR-website worden zoekmachines na een eerste crawl dus niet veel wijzer van de inhoud van de pagina.

De NextJS router

Waar React aparte packages heeft voor het opzetten van een router (Bijvoorbeeld react-router) zit deze bij NextJS al ingebouwd. Ook dit maakt je codebase kleiner en je applicatie dus gestructureerder.

Externe data server-side inladen

Binnen NextJS is het mogelijk om externe data in te laden voordat deze naar de client wordt gestuurd. Binnen CodeBee zijn wij erg fan van de Strapi + NextJS combinatie. Strapi is een CMS ongeveer gelijk aan WordPress of Drupal.

Wanneer je een CodeBee pagina inlaad wordt de content van de pagina op de NextJS-server ingeladen voordat deze door je browser wordt gedownload. Dit heeft de volgende voordelen:

1. Zoekmachines lezen dus de webpagina en de bijbehorende content uit ons CMS
2. Waar bij React deze data asynchroon wordt ingeladen is het bij NextJS niet nodig. Dus wederom minder code voor een beter resultaat.

Optimalisatie

NextJS biedt ook optimalisaties voor afbeeldingen, fonts en externe scripts. Deze optimalisaties helpen je met het boosten van de Core Web Vitals en bieden de klant ook nog eens een snellere en meer gebruiksvriendelijke ervaring.

Conclusie

Zoals je leest biedt NextJs de mogelijkheid om gestructureerd applicaties te ontwikkelen. Zo heeft de ontwikkelaar Vercel goed nagedacht over hoe ze het React framework kunnen versterken. Deze uitbreidingen bovenop React zorgen er ook voor dat NextJS op dit moment erg populair is. Binnen CodeBee zijn wij dan ook volledig overgestapt van React naar NextJS en dat heeft grotendeels te maken met de punten die hierboven benoemd zijn.