Terug naar alle Updates

Nieuwe gave features in Next.js 13

Update
31-05-2023
Geschreven door: Joey Kerkdijk, leestijd: 8 minuten
Nieuwe gave features in Next.js 13

De laatste versie van Next.js brengt veel gave nieuwe features met zich mee. Deze versie-update heeft veel toegevoegd op het gebied van developer experience, optimalisaties voor de snelheid van de applicatie en features die een stukje privacy teruggeven aan de eindgebruiker. In deze blog ga ik in op een paar van deze gave features. Lees je mee?  

App Directory, stable sinds versie 13.4

Aan het hoofd van deze update staat de App Router, dit is net als de Pages Directory een file based routing maar voegt nieuwe features toe. Deze App Directory was lange tijd in beta, maar inmiddels stable in versie 13.4. 

Deze App directory geeft de mogelijkheid om te werken met Layouts, React Server components en Streaming.

Next/Font

Next/Font is een volledig nieuw gebouwd systeem dat zich richt op – de naam zegt het al - fonts. Dit systeem optimaliseert externe en custom fonts automatisch, zorgt ervoor dat custom fonts automatisch gecached worden en externe fonts bij de applicatie ingeladen worden tijdens het builden. Dit komt de privacy van de eindgebruiker ten goede, aangezien deze geen verbinding hoeft te maken met bijvoorbeeld Google fonts.

Fonts zijn vaak grote bestanden, waardoor ze grote invloed hebben op de laadsnelheid van de applicatie. Door gebruik te maken van dit nieuwe systeem in Next.js 13 hoef je hier een stuk minder over na te denken en krijg je er ook nog eens een stuk privacy voor je eindgebruikers voor terug.

SEO & Metadata

Vanaf Next.js 13.2 kun je, als je gebruik maakt van de App Directory, direct in je Layout of Page de Metadata zetten.

Aan deze nieuwe aanpak zitten een aantal voordelen. Zo kun je bijvoorbeeld makkelijker Dynamische Metadata, zoals een product titel en beschrijving toevoegen aan je Product page via de generateMetadata functie. Deze wordt vervolgens voor alle producten gegenereerd en meegegeven, waardoor je betere resultaten in zoekmachines en het delen van links krijgt.

Guiding tomorrow's Technology

Dit is maar een kleine greep uit alle nieuwe features die Next.js 13 met zich meebrengt. Er zijn nog veel meer gave features. Ontdek het vooral ook zelf!  

Vaak zie je dat applicaties een aantal versies achterlopen, waardoor je de kans op voorop te lopen mist. Ondanks dat vind ik het zelf geweldig om op de hoogte te blijven van de laatste ontwikkelingen en vooruit te kijken naar experimentele releases. Hierdoor zie je waar het landschap zich naartoe beweegt, zodat je hier straks beter op kunt anticiperen.  

Afbeelding van Joey Kerkdijk
Joey Kerkdijk
Full Stack Developer
Accepteren

Deze website slaat cookies op je computer op. Deze cookies worden gebruikt om informatie te verzamelen over hoe je met onze website omgaat en om je te onthouden. We gebruiken deze informatie om je surfervaring te verbeteren, personaliseren, en voor analyse en meetgegevens over onze bezoekers, zowel op deze website als via andere media. Zie ons Privacybeleid voor meer informatie over de cookies die we gebruiken.

Noodzakelijke cookies: Cookies die benodigd zijn om de website te laten functioneren.

Statistieken: Deze cookies verzamelen anonieme informatie, zoals welke pagina's worden bekeken, die ons helpt om de website te verbeteren.

Marketing: Cookies die worden gebruikt om bezoekers te volgen wanneer ze verschillende websites bezoeken. Het doel hiervan is om de bezoeker advertenties te laten zien die relevant zijn voor de bezoeker.