logo

Snellere websites met NextJS versie 12

Development

NextJS heeft in oktober 2021 een grote update uitgebracht: NextJS 12. In deze versie zijn er veel nieuwe functies uitgebracht waardoor NextJS sneller en over het algemeen beter te gebruiken is. In deze blog gaan we het hebben over onze interesse in NextJS en waarom de nieuwe versie ons helpt snellere en beter vindbare websites en apps te bouwen. Ook hebben we het kort over de huidige versie NextJS 12.1 die nog meer verbeteringen met zich meebrengt!

hero-bg

Jelmer Visser

Teamlead Development

Gepubliceerd op

31 Oct. 2021

Bijgewerkt op

06 Feb. 2025

Wat is NextJS?

NextJS is een JavaScript-framework waarmee je supersnelle en uiterst gebruiksvriendelijke statische websites kunt bouwen. NextJS is een React framework waarbij je voor API's en server gerelateerde code, gebruik kan maken van NodeJS. NextJS is in staat om hybride applicaties te bouwen die zowel server-rendered als statisch gegenereerde pagina's bevatten.

Waarom kiezen wij voor NextJS?

Voor ons zijn React-applicaties het uitgangspunt. NextJS is het framework dat we voorstellen wanneer onze analyse uitwijst dat SSR voordelig zal zijn voor de klant. Dat is voornamelijk het geval bij applicaties die publiekelijk beschikbaar zijn en waarbij uitstekende SEO belangrijk is.

De volgende punten helpen zowel ons als onze klanten door gebruik te maken van NextJS:

  • Uitstekende Core Web Vitals door middel van het next/image component
  • Rijke gebruikerservaring (gemakkelijker en sneller)
  • Geweldige prestaties
  • Snelle ontwikkeling van modulaire componenten.
  • Open Graph toepassingen (SEO)
  • Out-of-the-box ondersteuning voor development functionaliteit (webpack, live herladen, code splitsen)

Nieuwe functionaliteiten van NextJS

Zoals eerder beschreven komt NextJS 12 met een heleboel nieuwe functionaliteiten. Wij noemen hieronder 3 punten waar wij als team erg blij mee zijn!

1. Sneller ontwikkelen (SWC) 

De ontwikkelaars van NextJS hebben erg veel gedaan om de prestaties en laadsnelheid van de apps te verhogen en om de ontwikkelaars-ervaring in het algemeen te verbeteren. Naast al de op gebruikers gebaseerde functies, heeft Vercel ook een Rust-compiler voor NextJS geïntroduceerd die de bouwtijd en verversingstijd tijdens de ontwikkeling enorm verkort. 

SWC kan zowel voor compilatie als bundeling worden gebruikt. Voor compilatie zijn JavaScript / TypeScript-bestanden nodig die moderne JavaScript-functies gebruiken en geldige code uitvoeren die wordt ondersteund door alle belangrijke browsers.

2. Geoptimaliseerde afbeeldingen 

Volgens het NextJS-team is het doel met NextJS om twee dingen te verbeteren: de gebruiker, maar ook die van de ontwikkelaar. En hoewel de meeste optimalisatie gericht is op het verminderen van de hoeveelheid JavaScript die naar gebruikers wordt verzonden, zijn er ook andere aspecten, zoals afbeeldingen, die ook moeten worden geoptimaliseerd. NextJS 10 verwelkomde een ingebouwde API voor beeldoptimalisatie, next/image, als een canonieke vorm voor native automatische beeldoptimalisatie. 

De bouwtijden worden niet verlengd als neveneffect van optimalisatie, omdat NextJS afbeeldingen on-demand optimaliseert wanneer gebruikers daarom vragen, in plaats van tijdens de build. Afbeeldingen worden standaard lazy geladen en kunnen worden weergegeven in moderne formaten zoals WebP in ondersteunde browsers. De ingebouwde Image Optimization API ondersteunt nu AVIF-afbeeldingen, waardoor tot wel 20% kleinere afbeeldingen mogelijk zijn in vergelijking met WebP.

3. Middelware 

NextJS 12 is inmiddels uitgebracht en heeft een heleboel nieuwe functies. Een van deze functies is middleware in NextJS. Middlewares zijn eenvoudige stukjes code waarmee men het antwoord op een verzoek kan wijzigen nog voordat het is voltooid. We kunnen herschrijven, omleiden, headers toevoegen of zelfs HTML streamen op basis van het verzoek van de gebruiker. 

NextJS middleware maakt gebruik van Vercel's Edge Functions die draaien op de V8 Engine. De V8 Engine is een JavaScript-engine geschreven in C++ en wordt onderhouden door Google. Het is aanzienlijk sneller dan het uitvoeren van Node.js op een virtuele machine of een container en Vercel beweert dat deze edge-functies onmiddellijk zijn.

Update React 18 

Op 29 Maart 2022 zijn de developers van Meta (Facebook) met de nieuwste update van React naar voren gekomen. Deze update biedt vele mogelijkheden waarop react developers nu al een tijdje hadden gewacht. Hier volgen in het kort een aantal updates die wij super interessant vinden!

  • Suspense: React Suspense laat de developer de website of applicatie een visuele laadstatus geven. Dit is handig als er veel data moet worden geladen.
  • Server Components: React server componenten worden uitgevoerd op de server. Dit zorgt ervoor dat deze componenten geen impact hebben op jouw website of applicatie zijn javascript bundle. Momenteel zijn de server components nog experimenteel in React 18. Maar er is beloofd dat in een toekomstige versie van React 18.x een stabiele versie van server components wordt gebruikt!
  • Transitions: Het gebruik van animaties kan door "Transitions" onderscheiden worden in dringend en niet dringend. Dit zorgt ervoor dat de gebruiker een nog betere ervaring heeft in het gebruik van de website of applicatie.

Conclusie 🎉

Met NextJS kunnen ontwikkelaars sneller React-apps van hoge kwaliteit schrijven. NextJS 12 is een complete game-changer en zal de manier waarop we React-applicaties met goede Core web vitals en SEO bouwen ten goede veranderen. 

Met de komst van React 18 gaat dit de ontwikkelaars ervaring nog beter maken! Ook is dit voor onze klanten een super goede ontwikkeling waardoor hun website of app nog sneller, gebruiksvriendelijker en sneller ontwikkeld wordt! 

Background
Waar kunnen we je mee helpen?
Ik bel of mail jullie liever