Better I18NInformazioni su questo starter
Questo è un template iniziale che mostra come usare better-i18n con Next.js App Router per creare applicazioni multilingue.
Stack tecnologico
Next.js 15
App Router + Componenti Server
@better-i18n/next
Traduzioni tramite CDN
next-intl
Hook di traduzione con sicurezza dei tipi
Tailwind CSS 4
Stile basato su classi utility
TypeScript 5
Sicurezza completa dei tipi
Architettura di traduzione CDN
Scopri di piùbetter-i18n utilizza un'architettura CDN-first. Quando pubblichi le traduzioni nella dashboard, vengono distribuite sulla rete edge globale di Cloudflare per una consegna sotto i 50ms in tutto il mondo.
Pubblicazione dalla dashboard
Le traduzioni vengono pubblicate dalla dashboard di better-i18n nello storage Cloudflare R2.
Distribuzione tramite Edge CDN
I pacchetti di traduzione vengono serviti da posizioni edge globali con tempi di caricamento inferiori a 50ms.
Rendering lato server
I componenti server di Next.js recuperano le traduzioni al momento della richiesta tramite getMessages() per HTML ottimizzato per i motori di ricerca.
Idratazione client
BetterI18nProvider idratta le traduzioni lato client senza spostamenti del layout. useSetLocale() consente il cambio istantaneo.
L'SDK memorizza nella cache i dati del manifest per 5 minuti e i messaggi di traduzione per 30 secondi per impostazione predefinita. L'invalidazione della cache avviene automaticamente alla pubblicazione.
API SDK utilizzate in questo template
Riferimento API completo| API | Tipo | Scopo |
|---|---|---|
createI18n() | Config | Inizializza SDK con le impostazioni del progetto |
i18n.betterMiddleware() | Server | Rilevamento della localizzazione da URL, cookie o Accept-Language |
i18n.getMessages(locale) | Server | Carica tutte le traduzioni per una localizzazione |
i18n.getLocales() | Server | Recupera le localizzazioni disponibili dal CDN |
BetterI18nProvider | Client | Contesto React per le traduzioni |
useTranslations(ns) | Client | Accesso alle traduzioni con sicurezza dei tipi |
useSetLocale() | Client | Cambio lingua istantaneo |
useManifestLanguages() | Client | Scoperta dinamica delle lingue dal CDN |
Come funziona
Le traduzioni vengono gestite nel pannello better-i18n e distribuite tramite CDN. Il middleware rileva la lingua dell'utente dall'URL, dal cookie o dalla lingua del browser. I messaggi vengono caricati lato server e passati al BetterI18nProvider per i componenti client.
Lingue disponibili
Questi locale vengono recuperati dal CDN al momento della build tramite l'API server-side i18n.getLocales().
Gestisci le lingue dalla Dashboard di better-i18n.