Hoe ik mijn persoonlijke website herbouwde met Nuxt 4 en Firebase

Mijn oude site was een enkel statisch HTML-bestand. Dit is hoe en waarom ik het herbouwde met Nuxt 4, Tailwind CSS, Firebase Hosting en een volledig aangepast meertalig systeem voor 10 talen.

De oude site

Lang was mijn persoonlijke website een enkel `index.html`-bestand. Minimaal en snel — maar niet schaalbaar. Ik besloot een volledige herbouw te doen.

Waarom Nuxt 4

Statische generatie — `nuxt generate` produceert statische uitvoer voor Firebase Hosting
Bestandsgebaseerde routering — Artikelpagina's op `/news/[slug]` werken zonder configuratie
TypeScript-first — De volledige codebase is getypeerd
SSR + hydratatie — Ideaal voor SEO

De stack

Nuxt 4 met `app/`-directorystructuur, SSR met statische generatie
Tailwind CSS — Utility-first styling
Firebase Hosting — Globaal CDN, eenvoudige deploys
Aangepaste i18n — Een zelfgemaakt composable met `vue-i18n`
Nitro serverroutes — Artikelen als lokale JSON-bestanden

Het meertalige systeem

De site ondersteunt 10 talen. Ik heb `@nuxtjs/i18n` bewust vermeden en een `useI18n()`-composable geschreven die uit een `locale`-cookie leest.

Artikelen als lokale JSON

Elk artikel is een JSON-bestand met een `translations`-object — één vermelding per locale met `title`, `summary` en `body` in Markdown.

SEO en prerendering

Een `nitro:config`-hook leest de `content/articles/`-directory vóór de Vite-build en voegt elke `/news/[slug]`-route toe aan de prerenderlijst.

Wat volgt

De site heeft nu proper routing, een nieuwsfeed en volledige meertalige ondersteuning.