Milkshake Festival: van Nuxt 2 naar Next.js in vier weken

Doel

De oude site haperde

Sommige pagina's gaven serverfouten en de caching stond niet goed ingesteld. Bij een plotselinge piek in bezoekers werd dat een echt risico.

Ik had drie doelen: snellere pagina's en betere Core Web Vitals, minder kosten voor dataverkeer tijdens pieken, en een CMS waarin het team zonder developer kan werken.

Uitvoering

Vooraf gebouwd met ISR

In Next.js gebruik ik Incremental Static Regeneration. Pagina's worden vooraf gebouwd en laden daardoor direct. Verandert er iets, dan wordt alleen die pagina op de achtergrond opnieuw gegenereerd.

Een strakkere contentstructuur

Ik heb de content in DatoCMS opnieuw ingedeeld. Pagina's hebben nu een vaste opbouw, zodat de redactie niet per ongeluk een layout sloopt. Beeld en video kregen een betere plek, vooral voor het Lookbook, dat uit heel veel foto's en video's bestaat.

Live previews

Redacteuren zien in een live preview de pagina die ze in DatoCMS aanpassen, en die preview werkt bij elke keer opslaan bij. Controleren gebeurt zo tijdens het werk in plaats van achteraf.

Een eigen migratietool

Alle content met de hand overzetten was geen optie. Ik schreef een export- en importtool die alles van de oude DatoCMS-omgeving naar de nieuwe verhuisde, inclusief zo'n 7 GB aan beeld en video. Ik verhuisde in kleine stappen en controleerde elke stap met de hand. De oude site bleef al die tijd online.

Resultaat

Live na vier weken

Na vier weken stond de nieuwe site live. Pagina's laden sneller, er zijn minder plekken waar het mis kan gaan en de caching voorkomt onnodig dataverkeer als het druk is. Het team werkt in een overzichtelijker DatoCMS en ziet vooraf wat het publiceert.