Nieuwe website gebouwd met Next.js en Contentful

Al ruim 20 jaar onderhoud ik een eigen website. Het begon met een eenvoudige website waar ik mijn dvd collectie toonde. Later kwamen daar reis verhalen, foto's en blogs bij. Tegenwoordig houd ik het simpel en bestaat mijn website enkel uit blogs.

Recent besloot ik mijn website wederom op de schop te nemen. Voor mij waren een aantal factoren daarbij van belang;

• Ik wil iets nieuws leren
• Website moet snel laden
• Beheer van content moet eenvoudig zijn
• Onderhoud van hosting en cms minimaliseren
• Kosten (van hosting) zo laag mogelijk houden

Next.js en Vercel

In mijn speurtocht kwam ik al snel uit bij Next.js, een op React gebaseerd framework. Met dit framework kan je snel en (relatief) eenvoudig applicaties (websites) ontwikkelen zonder alle ins- en outs van React te kennen. Ik had tot dusver weinig met React gedaan, dus dit is een mooie gelegendheid om iets nieuws te leren.

Een tweede voordeel aan Next.js is de dienst genaamd Vercel. Dit is een platform (van de makers van Next.js) waar je met enkele drukken op de knop je ontwikkelde website kan publiceren. Kortom, geen servers beheren, geen ssl certificaten regelen en geen pipelines onderhouden. Je koppelt Vercel aan je git repository, past je DNS aan, en de rest gaat vanzelf. En het mooiste is, het kost niets voor een hobby-project als dit!

Aan de hand van een tutorial van Next.js ontstond de eerste versie van mijn nieuwe website.

Tailwind CSS

Een website dient er natuurlijk ook netjes uit te zien. Denk hierbij aan een responsive design voor een optimale weergave op ieder apparaat (van mobiel tot desktop). Nu ben ik zeker geen front-end wizard, dus kwam het Tailwind CSS framework als geroepen. De zeer uitgebreide documentatie maakte het zelfs voor mij mogelijk een simpel maar strak design neer te zetten (al zeg ik het zelf).

Content beheren met Contentful

De eerste versie van mijn nieuwe website maakte gebruik van statische Markdown bestanden. Dit bleek te omslachtig aangezien ik voor iedere (tekst)wijziging een aanpassing in de broncode moest maken.

Toen kwam Contentful in beeld, een cloud-based headless CMS. Kortom, geen noodzaak om een eigen CMS te hosten (wat onderhoud en kosten bespaard). En ook voor deze dienst geldt, het kost niets voor een simpele website als deze!

Na het inrichten van Contentful was het enkele uurtjes spelen om mijn ontwikkelde blog hier aan te koppelen. Het resultaat is dat ik eenvoudig content kan beheren via een CMS.

Snelheid

Een belangrijke eis aan een nieuwe website is dat pagina's snel laden. Eén van de manieren om een website snel te maken is zo min mogelijk dynamisch te maken. Waarom zou een simpel blog als de mijne bijvoorbeeld iedere keer de API van Contentful aanspreken als een pagina wordt opgevraagd? Ik koos er dan ook voor om bij het publiceren op Vercel alle blogs uit Contentful op te halen en als statische content op te slaan.

Dit resulteert in een onvoorstelbaar snelle website zonder noemenswaardige nadelen. Het is belangrijk op te merken dat deze keuze sterk afhangt van de use-case. Als je duizenden pagina's in je CMS hebt staan dan is dit waarschijnlijk geen goede oplossing, maar voor een eenvoudig blog is dit prima.

Een veel gebruikte meting voor snelheid is Google PageSpeed Insights. Hierin scoort mijn website veelal tussen de 90 en 96 punten, waar ik zeer tevreden mee ben (en na wat optimalisaties scoort deze vaak nog hoger).

Wanneer ik content aanpas in Contentful zal automatische een nieuwe build worden getriggered bij Vercel. Het duurt dan ongeveer een halve minuut tot een minuut voordat de wijzigingen live staan.

Kosten en onderhoud

Naast de kosten voor twee domeinen (erikdevries.nl en erikdevries.com) betaal ik op dit moment niets voor mijn website. Next.js is opensource en Vercel en Contentful gebruik ik binnen de gratis limieten (die voor beide diensten behoorlijk ruim zijn).

Los van de kosten heb ik ook nauwelijks onderhoud. Er zijn geen servers die ik beheer en geen software updates die ik moet doorvoeren.

Conclusie

Zoals je kan lezen is ruimschoots voldaan aan de wensen die ik had voordat ik begon. Ik heb veel geleerd, heb geen onderhoud en kosten, kan eenvoudig content beheren via een CMS en de website is rete snel! Missie geslaagd.

Zijn er dan helemaal geen nadelen? Voor mij persoonlijk niet, maar deze oplossing is niet voor iedereen geschikt. Heb je een commercieel bedrijf met grote hoeveelheden data? Dan zal je mogelijk geen gebruik kunnen maken van de gratis diensten van zowel Vercel als Contentful. Tevens lever je wat vrijheid in ten opzichte van het hosten op eigen servers.

Maar voor vrijwel iedere kleine tot medium formaat website is dit een zeer goede (en vooral voordelige) oplossing al zeg ik het zelf.