Gebruikte tech
Uiteraard is dit portfolio ook een project dat ik met veel plezier heb opgebouwd. Hierbij heb ik gekozen voor NextJS 15 (met de app router), Contentful, GraphQL en SCSS modules voor de styling. Daarbij is er ook een meertaligheidsfunctionaliteit geïmplementeerd, zodat de website zowel in het Nederlands als in het Engels beschikbaar is.
Na een tijdje met Contentful te hebben gewerkt, kan ik met zekerheid zeggen dat dit CMS mij enorm bevalt – zeker als je de kneepjes van GraphQL eenmaal doorhebt. Ik ben zelfs zo ver gegaan dat ik een eigen "Fragment Generator" heb geschreven. Hiermee kan ik, zodra ik een nieuw contentmodel maak in Contentful, simpelweg de ID invoeren en krijg ik direct de bijbehorende TypeScript types en GraphQL fragmenten voorgeschoteld. Dit bespaart me veel tijd en maakt het werk met Contentful nog efficiënter.
Het systeem werkt als volgt: NextJS biedt de mogelijkheid tot Server Side Rendering (SSR), wat betekent dat je van tevoren al de HTML van je pagina’s genereert en deze naar de client stuurt. Tegelijkertijd kun je in die statische HTML schakelen naar dynamische React componenten wanneer dat nodig is. Tijdens de build-fase haal ik alle "Page" content types op uit Contentful en verzamel ik alle slugs. Deze slugs worden vervolgens doorgegeven aan NextJS’s generateStaticParams functie, die op basis daarvan statische pagina’s aanmaakt. Vervolgens, in de paginafunctie, worden de specifieke componenten en SEO-data voor die pagina opgehaald. En voilà, klaar is kees!
Deze aanpak maakt het mogelijk om een website te creëren die razendsnel laadt: in essentie stuur je een HTML-bestand met content, waardoor er nauwelijks JavaScript op de client uitgevoerd hoeft te worden. Tegelijkertijd behoud je de voordelen van dynamische content via React. Doordat de bundles die naar de computer van de gebruiker worden gestuurd aanzienlijk kleiner zijn, geniet de website van een uitstekende performance.
