Come ho ricostruito il mio sito personale con Nuxt 4 e Firebase
Il mio vecchio sito era un singolo file HTML statico. Ecco come e perché l'ho ricostruito con Nuxt 4, Tailwind CSS, Firebase Hosting e un sistema multilingua personalizzato per 10 lingue.
Il vecchio sito
Per molto tempo, il mio sito personale era un singolo file `index.html`. Minimale e veloce — ma non scalabile. Ho deciso di fare una ricostruzione completa.
Perché Nuxt 4
- Generazione statica — `nuxt generate` produce output statico compatibile con Firebase Hosting
- Routing basato sui file — Le pagine degli articoli a `/news/[slug]` funzionano senza configurazione
- TypeScript-first — L'intero codebase è tipizzato
- SSR + idratazione — Ideale per la SEO
Lo stack
- Nuxt 4 con struttura di directory `app/`, SSR con generazione statica
- Tailwind CSS — Stili utility-first
- Firebase Hosting — CDN globale, deploy semplici
- i18n personalizzato — Un composable artigianale con `vue-i18n`
- Route server Nitro — Articoli come file JSON locali
Il sistema multilingua
Il sito supporta 10 lingue. Ho evitato `@nuxtjs/i18n` e scritto un composable `useI18n()` che legge da un cookie `locale`.
Articoli come JSON locale
Ogni articolo è un file JSON con un oggetto `translations` — una voce per locale con `title`, `summary` e `body` in Markdown.
SEO e prerendering
Un hook `nitro:config` legge la directory `content/articles/` prima del build e aggiunge ogni route `/news/[slug]` alla lista di prerendering.
Prossimi passi
Il sito ha ora routing appropriato, un feed di notizie e supporto multilingua completo.