--- title: Next.js 13 date: 2025-08-01T11:40:00+02:00 author: Appeel content team canonical_url: "https://appeel.io/inzichten/next-js-13" section: Insights --- # Next.js 13 ## Frontend development ## Walid Yachou Walid Yachou ![Avatar Walid](https://cdn.craft.cloud/a6a46d79-dea3-425d-8f36-621fcf53254b/assets/img/Employees/Avatar-Walid.png) Frontend Developer Sinds kleins af aan heb ik interesse voor computers en technologie. Door mijn nieuwsgierigheid kom ik op Google terecht met vragen zoals “Hoe maak ik een website”. Dan begint de bal te rollen en kom je snel in de HTML/CSS/JavaScript wereld terecht. Mobile development heeft mij ook altijd al geïnteresseerd. Wie heeft er nu geen smartphone? Die zit nu ofwel op je bureau ofwel in je broekzak. Naast code schrijven lees ik graag eens een boek (eerder non-fictie) en kan uren praten over auto’s. Next.js 13 Insights Het is zover, Next.js 13 is sinds 25 oktober 2022 uitgebracht. Exact zes jaar later dan de eerste Next.js release. Waarom zou je Next.js willen gebruiken en wat zijn de nieuwe functionaliteiten in Next.js 13? In deze blogpost bespreken we wat de verschillen zijn tussen Server-Side en Client-Side Rendering. Vervolgens onderzoeken we hoe je een applicatie structureert, wat server componenten zijn, streamen van UI en enkele verbeteringen. Als laatste bekijken we wat Next.js 13 voor de toekomst te bieden heeft. ![Next js 13](https://cdn.craft.cloud/a6a46d79-dea3-425d-8f36-621fcf53254b/assets/img/Images/Next.js-13.png) ## Waarom Next.js en niet gewoonweg React? Even terug naar de basis. Elke frontend ontwikkelaar heeft al eens iets gehoord over React. Een Javascript library om gemakkelijk en efficiënt user interfaces te bouwen. Het is uiteindelijk nog steeds de meest gebruikte frontend tool volgens de 2021 “State of JS” ranglijst. React heeft echter wel enkele tekortkomingen. Het maakt onder andere gebruik van Client-Side Rendering (CSR). Dit betekent dat de inhoud van je pagina in de browser wordt opgebouwd. Ook moet je bijvoorbeeld een bijkomende library toevoegen voor routing functionaliteit. Next.js is bovenop React gebouwd om onder andere deze gebreken op te lossen. Je hoeft je geen zorgen te maken over routing en het maakt gebruik van Server-Side Rendering (SSR). De inhoud van je pagina wordt op de server opgebouwd en je browser krijgt meteen de volledige HTML pagina. ![Front End Frameworks](https://cdn.craft.cloud/a6a46d79-dea3-425d-8f36-621fcf53254b/assets/img/Images/Front-End-Frameworks.png) ### Pizza analogie Een persoon (client) wil een pizza maken (pagina). Bij Client-Side Rendering worden ‘ingrediënten’ geleverd aan huis (browser) om verschillende pizza’s te kunnen maken. De persoon gaat vervolgens de gewenste pizza zelf maken. Heeft de persoon grote honger? Geen probleem, alle soorten ingrediënten zijn geleverd, een nieuwe pizza maken is snel! Bij Server-Side Rendering besteld de persoon een specifieke pizza bij een restaurant (server). Het restaurant maakt deze klaar levert die aan huis (browser). De persoon hoeft zelf verder niets te doen! Misschien kan je al enkele voor-en nadelen bedenken bij bovenstaand scenario. **Voordelen Client-Side Rendering** - Initiële laadtijd is trager dan Server-Side Rendering. - Zoekmachines hebben het moeilijker om je website te crawlen. **Nadelen Client-Side Rendering** - Snelle rendering nadat de initiële pagina is geladen. - Minder stress op de server. **Voordelen Server-Side Rendering** - Snelle initiële pagina - Betere SEO **Nadelen Server-Side Rendering** - Frequentere calls naar de server. ## Wat is er nieuw in Next.js 13? #### De `/app` directory De manier waarop je uw Next.js applicatie structureert is volledig aangepast. In voorgaande versies zet je al uw pagina’s onder de `/pages` folder. De homepagina zit dus onder `/pages/index.jsx` en de user pagina onder `/pages/user.jsx`. Nu is het een op mappen gebaseerde hiërarchie. Je gebruikt mappen om routes te definiëren, en speciale bestanden met gereserveerde namen - `layout.jsx`, `page.jsx`, en `loading.jsx` - om UI te definiëren, waarbij `page.jsx` het minimaal vereiste is. De homepagina valt dus onder `/app/page.jsx` en de user pagina onder `/app/user/page.jsx`. Alles wat je onder `/app` zet gebruikt standaard de nieuwe functionaliteiten van Next.js 13. Server componenten, complexe layout structuren, streamen van UI elementen en nog veel meer. Het is ook mogelijk om alle relevante bestanden voor het opbouwen van de user pagina onder één map te steken. Denk aan stylesheets, storybook bestanden, unit tests, enzovoorts. #### Server-side componenten Let op, alle componenten zijn standaard server-side componenten. Wil je toch nog gebruik maken van Client-side componenten, dan moet je bovenaan je file `’use client’;` importeren. ‘use client’; ```plaintext Import { useState } from ‘react’ Export default function Component() { return (…) } ``` Er zijn enkele zaken waarmee je rekening moet houden als je server-side componenten gebruikt. Je zal geen hooks kunnen gebruiken zoals `useEffect` en `useState`. Ook eventlisteners zoals `onClick` of Browser API’s kan je niet gebruiken. Maar als voordeel betekent dit dat je data fetching en backend gerelateerde data in je server-componenten kan plaatsvinden. Minder JS voor de client! Voorbeeld: Een van ToDo’s als server component waar je alle nodige data ophaalt. Een client component die alle individuele ToDo’s kan renderen. Wanneer moet je een server of client component gebruiken? Server component: - Je moet data moet ophalen van een API/database - Wanneer je zware Javascript-bundles gebruikt op de frontend zoals een GraphQL client. Deze kunnen nu gewoon leven op de server waardoor pagina’s voor gebruikers sneller laadt. Client component: - Je hebt interactiviteit nodig. Denk aan `useState`, custom hooks, even listeners, Browser API voor toegang tot je clipboard, enzovoorts. #### Streaming Wat bedoelt men met streamen? Je kan incrementeel UI elementen versturen vanuit de server naar de client om progressief de componenten op je pagina te laden. Je pagina wordt op deze manier niet meer belemmerd door data dat lang duurt om op te halen. Dit zorgt voor een betere gebruikerservaring. Dit kan je nu met Next.js 13 doen op twee manieren. Enerzijds door een `loading.jsx` bestand aan te maken onder je `/app` directory. Hier kan je een soort van laadanimatie renderen zoals een spinner of skeleton. Voorbeeld: ```plaintext Export default function Loading() { Return } ``` Zodra de data van die `loading.jsx` voltooid is wordt het automatisch gewisseld met de inhoud van `page.jsx` Anderzijds kan je uw JSX component dat data nodig heeft wrappen met `Suspense`. Terwijl de data aan het laden is wordt de `fallback` prop van de Suspense getoond. Voorbeeld: ```plaintext Import { Suspense } from ‘react’; Import { UserData, UserPosts } from ‘./Components’; Export default function User() { Return ( ) } ``` Streamen met `layout.jsx` of Suspense is een grote stap in de juiste richting op gebied van UI/UX. Je haalt er grote voordelen uit zoals: - Verbeter de Time To First Byte/First Contentful Paint zodat uw gebruikers sneller met je applicatie kunnen werken. - Je applicatie bestand maken tegen inconsistente netwerksnelheden of onverwachte fouten op de backend. #### @next/font - Next.js 13 introduceert een nieuw fontsysteem. - Automatisch je fonts optimaliseren, ook voor custom fonts. - Externe netwerkverzoeken verwijderen voor betere privacy en snelheid. - Self-hosting van eender welke font bestanden. - Geen layout shifts door door automatisch gebruik te maken van de `size-adjust` CSS eigenschap. - CSS- en fontbestanden worden gedownload tijdens build time en zijn self-hosted met de rest van uw statische assets. De browser stuurt geen verzoeken naar Google. - Ingebouwde automatische zelf-hosting voor elk lettertype-bestand - Nul lay-out verschuiving automatisch met behulp van de CSS size-adjust eigenschap Met dit nieuwe lettertypesysteem kunt u gemakkelijk alle Google Fonts gebruiken met het oog op prestaties en privacy. CSS- en lettertypebestanden worden gedownload tijdens het bouwen en zelf gehost met de rest van uw statische activa. De browser stuurt geen verzoeken naar Google. #### @next/image De nieuwe Next.js component, met betere on-the-fly beeldoptimalisatie, betere accesibility omdat alt tags nu standaard vereist zijn, minder client-side JavaScript, eenvoudigere en meer intuïtieve styling/configuratie, en native lazy-loading voor je afbeeldingen zonder hydration nodig te hebben. #### Turbopack Turbopack, een nieuwe, Rust-based opvolger van Webpack. In Next.js 12 begon de overgang naar native Rust-aangedreven tooling. De migratie van Babel resulteerde in 17x snellere transpilatie. Daarna werd Terser vervangen, wat resulteerde in 6x snellere minificatie. Volgens het team van Next.js is Turbopack: - 700x sneller dan Webpack - 10x sneller dan Vite - 4x snellere cold starts dan Webpack Cold start benchmark met 1000 React componenten: ![Cold Start](https://cdn.craft.cloud/a6a46d79-dea3-425d-8f36-621fcf53254b/assets/img/Images/Cold-Start.png) File change (HMR) benchmark met 1000 React componenten: ![File Change](https://cdn.craft.cloud/a6a46d79-dea3-425d-8f36-621fcf53254b/assets/img/Images/File-Change.png) 💡 Wist je dat de oprichter van Webpack (Tobias Koppers) nu aan Turbopack werkt? ![Webpack Tweet](https://cdn.craft.cloud/a6a46d79-dea3-425d-8f36-621fcf53254b/assets/img/Images/Webpack-Tweet.png) Het is belangrijk op te merken dat de meeste van deze voordelen te danken zijn aan Turbo's caching op afstand - wat betekent dat u enorme prestatieverbeteringen zult zien in gebruikssituaties waar het optimaliseren van caching zou helpen, d.w.z. grote projecten met honderden modules, maar minder in uw basis ToDo-apps. ❗ Let op, tijdens het schrijven van deze blogpost is Turbopack nog in Alpha. Gebruik het dus nog niet voor productie omgevingen (tenzij je graag leeft op het randje). ## Nog enkele belangrijke zaken ![Check 1](https://cdn.craft.cloud/a6a46d79-dea3-425d-8f36-621fcf53254b/assets/img/Icons/Check-1.svg) De minimale versie van React is verhoogd van 17.0.2 naar 18.2.0 De minimale Node.js versie is verhoogd van 12.22.0 naar 14.6.0 De import `next/image` is hernoemd naar `next/legacy/image`. De import `next/future/image` is hernoemd naar `next/image`. ## Conclusie Er zijn heel wat baanbrekende veranderingen. De manier hoe je pagina’s samenstelt is anders. Een groot projecten migreren zal niet zo evident zijn. Heel wat zaken zijn nog in Beta en gebruiken bleeding-edge functionaliteiten van React 18 die zelf nog niet stabiel zijn. Deze release is eerder een voorproefje van wat de toekomst te bieden heeft. Speel eens met de nieuwe functionaliteiten op je lokale omgeving en kijk wat er mogelijk is. Nu al in productie gebruiken is zeer riskant en zou ik afraden. Ik verwacht dat in Next.js 14 alles uitgestreken zal worden. De toekomst ziet er spannend uit! Ben jij gepassioneerd door frontend ontwikkeling en zou je graag uitgroeien tot een expert in je vak? Wil jij jezelf verder ontwikkelen in een gedreven team met focus op kwaliteit en innovatie? Wij geven jou die vrijheid. Enkele dagen in de maand krijg je van ons de tijd om je kennis te verbeteren en te delen met je collega’s. Op zoek naar inspiratie? Wij zorgen voor gepast advies op het vlak van frontend development. [Contacteer ons](https://appeel.io/contact)