Better I18NSobre este Starter
Este é um template inicial que demonstra como usar better-i18n com o Next.js App Router para criar aplicações multilíngues.
Stack tecnológica
Next.js 15
App Router + Server Components
@better-i18n/next
Traduções via CDN
next-intl
Hooks de tradução com segurança de tipos
Tailwind CSS 4
Estilização utility-first
TypeScript 5
Segurança de tipos completa
Arquitetura de Tradução via CDN
Saiba maisbetter-i18n usa uma arquitetura CDN-first. Quando você publica traduções no dashboard, elas são implantadas na rede edge global da Cloudflare para entrega mundial em menos de 50 ms.
Publicação pelo dashboard
As traduções são publicadas do dashboard better-i18n para o armazenamento Cloudflare R2.
Entrega por Edge CDN
Os pacotes de tradução são servidos a partir de localidades edge globais com tempos de carregamento inferiores a 50 ms.
Renderização no lado do servidor
Os componentes de servidor do Next.js buscam traduções no momento da requisição via getMessages() para HTML otimizado para SEO.
Hidratação no cliente
BetterI18nProvider hidrata as traduções no cliente sem deslocamento de layout. useSetLocale() permite a troca instantânea de idioma.
O SDK armazena em cache os dados do manifesto por 5 minutos e as mensagens de tradução por 30 segundos por padrão. A invalidação do cache acontece automaticamente ao publicar.
APIs do SDK usadas neste Starter
Referência completa da API| API | Tipo | Finalidade |
|---|---|---|
createI18n() | Config | Inicializar o SDK com as configurações do projeto |
i18n.betterMiddleware() | Server | Detecção de idioma via URL, cookie ou Accept-Language |
i18n.getMessages(locale) | Server | Carregar todas as traduções de um idioma |
i18n.getLocales() | Server | Buscar idiomas disponíveis no CDN |
BetterI18nProvider | Client | Contexto React para traduções |
useTranslations(ns) | Client | Acesso a traduções com segurança de tipos |
useSetLocale() | Client | Troca instantânea de idioma |
useManifestLanguages() | Client | Descoberta dinâmica de idiomas a partir do CDN |
Como funciona
As traduções são gerenciadas no dashboard do better-i18n e entregues via CDN. O middleware detecta o idioma do usuário pela URL, cookie ou idioma do navegador. As mensagens são carregadas no servidor e passadas ao BetterI18nProvider para os componentes do cliente.
Idiomas disponíveis
Esses idiomas são buscados do CDN no momento do build usando i18n.getLocales() — uma API do lado do servidor.
Gerenciar idiomas pelo dashboard do better-i18n.