Jak przebudowałem swój osobisty serwis z Nuxt 4 i Firebase

Mój stary serwis to był jeden statyczny plik HTML. Oto jak i dlaczego przebudowałem go z Nuxt 4, Tailwind CSS, Firebase Hosting i w pełni niestandardowym systemem wielojęzycznym obsługującym 10 języków.

Stary serwis

Przez długi czas mój osobisty serwis był pojedynczym plikiem `index.html`. Minimalny i szybki — ale nie skalowalny. Zdecydowałem się na pełną przebudowę.

Dlaczego Nuxt 4

Generowanie statyczne — `nuxt generate` produkuje statyczne wyjście kompatybilne z Firebase Hosting
Routing oparty na plikach — Strony artykułów pod `/news/[slug]` działają bez konfiguracji
TypeScript jako standard — Cała baza kodu jest typowana
SSR + hydratacja — Idealne dla SEO

Stack

Nuxt 4 ze strukturą katalogu `app/`, SSR z generowaniem statycznym
Tailwind CSS — Stylowanie utility-first
Firebase Hosting — Globalne CDN, proste wdrożenia
Niestandardowe i18n — Własny composable używający bezpośrednio `vue-i18n`
Trasy serwera Nitro — Artykuły jako lokalne pliki JSON

System wielojęzyczny

Serwis obsługuje 10 języków. Celowo unikałem `@nuxtjs/i18n` i napisałem composable `useI18n()` czytający z ciasteczka `locale`.

Artykuły jako lokalny JSON

Każdy artykuł to plik JSON z obiektem `translations` — jeden wpis na locale z `title`, `summary` i `body` w Markdown.

SEO i prerenderowanie

Hook `nitro:config` odczytuje katalog `content/articles/` przed buildem Vite i dodaje każdą trasę `/news/[slug]` do listy prerenderowania.

Co dalej

Serwis ma teraz właściwy routing, feed z aktualnościami i pełne wsparcie wielojęzyczne.