Better I18NÀ propos de ce Starter
C'est un template de démarrage montrant comment utiliser better-i18n avec Next.js App Router pour créer des applications multilingues.
Stack technique
Next.js 15
App Router + Server Components
@better-i18n/next
Traductions via CDN
next-intl
Hooks de traduction avec sécurité de types
Tailwind CSS 4
Styles utility-first
TypeScript 5
Sécurité de types complète
Architecture de traduction CDN
En savoir plusbetter-i18n utilise une architecture CDN-first. Lorsque tu publies des traductions dans le dashboard, elles sont déployées sur le réseau edge mondial de Cloudflare pour une livraison mondiale en moins de 50 ms.
Publication depuis le dashboard
Les traductions sont publiées depuis le dashboard better-i18n vers le stockage Cloudflare R2.
Livraison par Edge CDN
Les paquets de traduction sont servis depuis des emplacements edge mondiaux avec des temps de chargement inférieurs à 50 ms.
Rendu côté serveur
Les composants serveur Next.js récupèrent les traductions au moment de la requête via getMessages() pour un HTML optimisé pour le SEO.
Hydratation côté client
BetterI18nProvider hydrate les traductions côté client sans décalage de mise en page. useSetLocale() permet un changement de langue instantané.
Le SDK met en cache les données du manifeste pendant 5 minutes et les messages de traduction pendant 30 secondes par défaut. L'invalidation du cache s'effectue automatiquement lors de la publication.
APIs du SDK utilisées dans ce Starter
Référence complète de l'API| API | Type | Objet |
|---|---|---|
createI18n() | Config | Initialiser le SDK avec les paramètres du projet |
i18n.betterMiddleware() | Server | Détection de la langue depuis l'URL, le cookie ou Accept-Language |
i18n.getMessages(locale) | Server | Charger toutes les traductions pour une langue |
i18n.getLocales() | Server | Récupérer les langues disponibles depuis le CDN |
BetterI18nProvider | Client | Contexte React pour les traductions |
useTranslations(ns) | Client | Accès aux traductions avec sécurité de types |
useSetLocale() | Client | Changement de langue instantané |
useManifestLanguages() | Client | Découverte dynamique des langues depuis le CDN |
Comment ça fonctionne
Les traductions sont gérées dans le dashboard better-i18n et livrées via CDN. Le middleware détecte la langue de l'utilisateur depuis l'URL, le cookie ou la langue du navigateur. Les messages sont chargés côté serveur et transmis au BetterI18nProvider pour les composants clients.
Langues disponibles
Ces langues sont récupérées depuis le CDN au moment du build via l'API serveur i18n.getLocales().
Gérer les langues depuis le dashboard better-i18n.