Naar de inhoud

Herfstvakantie. Gesloten 2 – 8 november, terug op 9 november. Meer info over onze sluitingsdagen

in2sites, naar de startpagina

Lesmateriaal · Programmeren · Gevorderd, met kennis van React

Cursus Next.js

Van React naar volledige webapplicaties: routing, servercomponenten, server actions, login en SEO met de App Router.

Omslag van de cursus Next.js van in2sites
Omslag van de cursus Next.js · A4

Voor wie is de cursus Next.js?

De cursus Next.js is er voor developers die React kennen en volledige websites of webapplicaties willen bouwen die snel laden en goed vindbaar zijn. Next.js voegt routing, rendering op de server en optimalisatie toe aan React. Daardoor hoef je minder zelf samen te stellen.

Na de cursus Next.js zet je een project op met de App Router en haal je gegevens op aan de serverkant. Per pagina kies je of de server ze vooraf opbouwt of bij elke aanvraag opnieuw. Je verwerkt formulieren met server actions, beveiligt pagina’s achter een login en zet metadata klaar voor zoekmachines. Bovendien begrijp je hoe Next.js samenwerkt met een aparte backend, zoals een Laravel-API. Dat is de opstelling die je in veel bedrijven tegenkomt.

Wat de cursus Next.js behandelt

We beginnen bij de structuur van een Next.js-project. Mappen bepalen de routes, en met layouts deel je een menu of voettekst over meerdere pagina’s. Daarna leer je het verschil tussen servercomponenten en clientcomponenten, het belangrijkste idee van de App Router. Je ziet ook welke code naar de browser gaat en welke op de server blijft.

Vervolgens haal je gegevens op. Je roept een API aan vanuit een servercomponent, stelt caching in en kiest tussen statische en dynamische pagina’s. Ook laadschermen en foutpagina’s per route komen aan bod, zodat een trage bron niet de hele site ophoudt.

In het derde deel van de cursus Next.js werk je met formulieren en mutaties via server actions. Je valideert invoer, toont fouten netjes en ververst de juiste gegevens na het opslaan. Daarnaast bouw je een login met middleware die afgeschermde pagina’s bewaakt. Zo zie je hoe sessies en rechten tussen frontend en backend lopen.

Tot slot maak je je site klaar voor de buitenwereld. Je zet titels, beschrijvingen en Open Graph-gegevens per pagina, en je optimaliseert beelden en lettertypes. Daarna bekijk je hoe je de app online zet en hoe je omgevingsvariabelen veilig beheert. Voor de details verwijzen we naar de documentatie van Next.js, die bij elke nieuwe versie meegroeit.

Opengeslagen cursus Next.js: een hoofdstuk met uitleg en een oefening
Een opengeslagen pagina met uitleg en een oefening.

Zo volg je deze opleiding

Bij in2sites bouwen we frontends in Next.js met TypeScript, vaak op een Laravel-API. Dat is ook de opstelling in deze cursus: een React-frontend die praat met een echte backend, zoals in een klantproject. Zo zie je hoe beide kanten elkaar verwachten.

Het lesmateriaal is van Tom Vanhoutte, die naast zijn werk als developer ook lesgeeft. Elke les bouwt verder aan dezelfde toepassing, bijvoorbeeld een portaal met een login, een overzicht en een formulier. Tussen de lessen door kun je met vragen terecht, want bij een framework dat snel evolueert, duiken er geregeld nieuwe op. Je volgt de cursus Next.js in groep bij een opleidingscentrum, in-company of individueel. Alle mogelijkheden lees je bij onze IT-opleidingen. Wil je zo’n portaal voor je eigen klanten, kijk dan bij klantenportaal laten maken.

Cookievoorkeuren

Kies welke cookies je toestaat. Je kunt dit later altijd wijzigen.

Nodig om de website te laten werken, bijvoorbeeld om je cookiekeuze te onthouden en het contactformulier te beveiligen. Deze staan altijd aan.

Altijd aan

Helpen ons begrijpen hoe bezoekers de website gebruiken (Google Analytics), zodat we ze kunnen verbeteren. De gegevens zijn niet bedoeld om jou persoonlijk te volgen.

Maken het mogelijk om onze advertenties te meten en relevanter te maken op andere websites. Momenteel niet in gebruik; we vragen het pas als het nodig is.