Comment j'ai reconstruit mon site personnel avec Nuxt 4 et Firebase
Mon ancien site était un simple fichier HTML statique. Voici comment et pourquoi je l'ai reconstruit avec Nuxt 4, Tailwind CSS, Firebase Hosting, et un système multilingue personnalisé couvrant 10 langues.
L'ancien site
Pendant longtemps, mon site personnel était un seul fichier `index.html`. Minimal, rapide et facile à maintenir — mais pas extensible. J'ai décidé de faire une reconstruction complète.
Pourquoi Nuxt 4
J'ai choisi Nuxt 4 pour plusieurs raisons précises :
- Génération statique — `nuxt generate` produit une sortie statique compatible avec Firebase Hosting
- Routage basé sur les fichiers — Les pages d'articles à `/news/[slug]` fonctionnent sans configuration
- TypeScript natif — Toute la codebase est typée
- SSR + hydratation — Idéal pour le SEO
La stack
- Nuxt 4 avec structure de répertoire `app/`, SSR avec génération statique
- Tailwind CSS — Styles utilitaires sans surcharge de bibliothèque de composants
- Firebase Hosting — CDN mondial, déploiements en une commande
- i18n personnalisé — Un composable maison utilisant directement `vue-i18n`
- Routes serveur Nitro — Articles stockés en JSON local servis via `server/api/`
Le système multilingue
Le site supporte 10 langues. J'ai délibérément évité `@nuxtjs/i18n`. À la place, j'ai écrit un composable `useI18n()` qui lit depuis un cookie `locale`. Le changement de langue est instantané sans rechargement de page.
Articles comme JSON local
Chaque article est un fichier JSON dans `content/articles/` avec un objet `translations` — une entrée par locale avec `title`, `summary` et `body` en Markdown.
SEO et prérendu
Un hook `nitro:config` lit le répertoire `content/articles/` avant le build Vite et ajoute chaque route `/news/[slug]` à la liste de prérendu. Chaque page utilise `useSeoMeta()` et `useHead()` avec des liens hreflang pour toutes les 10 locales.
La suite
Le site dispose maintenant d'un routage approprié, d'un fil d'actualités et d'un support multilingue complet.