Astro
Integrá i1n con Astro para sitios multilingües estáticos y renderizados por el servidor.
Configuración
Ejecuta i1n init en tu proyecto de Astro. La CLI configura el formato JSON anidado en el directorio locales/. Los proyectos de Astro suelen utilizar el SDK de i1n en modo independiente.
Crea un módulo de utilidad (ej. src/i18n/index.ts) que inicialice i1n y exporte una función useTranslations(). Esta función carga los recursos de localización apropiados y devuelve la función t() type-safe.
Uso
En tus páginas de .astro, llama a useTranslations(locale) en el frontmatter para obtener la función t(). Úsala para renderizar cadenas traducidas en tus plantillas. Dado que los componentes de Astro se ejecutan en tiempo de compilación, las traducciones se incrustan estáticamente en el HTML generado.
Organiza las traducciones por espacio de nombres (ej. common.json, home.json, docs.json) para mantener los archivos manejables. Usa getLocalePath(locale, path) para generar URLs con prefijo de localización para la navegación interna.
Generación Estática
Usa getStaticPaths() para generar páginas para todas las localidades admitidas. Cada variante de localidad se compila como una página HTML separada, lo que garantiza una carga rápida y un SEO óptimo con las etiquetas hreflang adecuadas.
Agrega i1n pull a tu paso de compilación para asegurar que los archivos de traducción estén sincronizados antes de la generación estática. El proceso de compilación de Astro generará automáticamente todas las variantes de idioma.
Modo Puente
Los proyectos de Astro suelen utilizar el SDK de i1n directamente en lugar de una biblioteca externa de i18n. Sin embargo, si utilizas una integración de framework (por ejemplo, componentes de React dentro de Astro), puedes usar el Modo Puente dentro de esas islas de framework.
Para islas de React: registerI1n((key, params) => i18next.t(key, params)). Para islas de Vue: registerI1n((key, params) => i18n.global.t(key, params)). El shell de Astro y las islas de framework pueden usar su enfoque preferido.
import { init, t as i1nT } from 'i1n'
export function useTranslations(locale: string) {
init({
locale,
resources: loadResources(locale)
})
return i1nT
}