Better I18NSobre este Starter
Este es un template de inicio que muestra cómo usar better-i18n con Next.js App Router para construir aplicaciones multilingües.
Stack tecnológico
Next.js 15
App Router + Server Components
@better-i18n/next
Traducciones por CDN
next-intl
Hooks de traducción con seguridad de tipos
Tailwind CSS 4
Estilos utility-first
TypeScript 5
Seguridad de tipos completa
Arquitectura de Traducción CDN
Saber másbetter-i18n usa una arquitectura CDN-first. Cuando publicas traducciones en el dashboard, se despliegan en la red global de Cloudflare para entregas de menos de 50 ms en todo el mundo.
Publicación desde el dashboard
Las traducciones se publican desde el dashboard de better-i18n al almacenamiento Cloudflare R2.
Entrega por Edge CDN
Los paquetes de traducciones se sirven desde ubicaciones edge globales con tiempos de carga inferiores a 50 ms.
Renderizado del lado del servidor
Los componentes del servidor de Next.js obtienen traducciones en tiempo de solicitud mediante getMessages() para HTML optimizado para SEO.
Hidratación en el cliente
BetterI18nProvider hidrata las traducciones en el cliente sin desplazamiento de layout. useSetLocale() permite el cambio instantáneo de idioma.
El SDK almacena en caché los datos del manifiesto durante 5 minutos y los mensajes de traducción durante 30 segundos por defecto. La invalidación de caché ocurre automáticamente al publicar.
APIs del SDK usadas en este Starter
Referencia completa de la API| API | Tipo | Propósito |
|---|---|---|
createI18n() | Config | Inicializar el SDK con la configuración del proyecto |
i18n.betterMiddleware() | Server | Detección de idioma desde URL, cookie o Accept-Language |
i18n.getMessages(locale) | Server | Cargar todas las traducciones para un idioma |
i18n.getLocales() | Server | Obtener los idiomas disponibles desde el CDN |
BetterI18nProvider | Client | Contexto de React para traducciones |
useTranslations(ns) | Client | Acceso a traducciones con seguridad de tipos |
useSetLocale() | Client | Cambio instantáneo de idioma |
useManifestLanguages() | Client | Descubrimiento dinámico de idiomas desde el CDN |
Cómo funciona
Las traducciones se gestionan en el dashboard de better-i18n y se entregan mediante CDN. El middleware detecta el idioma del usuario desde la URL, la cookie o el idioma del navegador. Los mensajes se cargan en el servidor y se pasan al BetterI18nProvider para los componentes del cliente.
Idiomas disponibles
Estos idiomas se obtienen del CDN en tiempo de compilación usando i18n.getLocales() — una API del lado del servidor.
Gestión de idiomas desde el dashboard de better-i18n.