Respuesta Rápida
Para agregar internacionalización (i18n) a Svelte, usa svelte-i18n. Instala con npm install svelte-i18n, crea tus archivos de diccionario, inicializa la librería en tu diseño (layout), y usa la store $t para mostrar texto traducido. Para SvelteKit, asegura que manejes la inicialización tanto en lado servidor como cliente para prevenir desajustes de hidratación.
Introducción a la Internacionalización en Svelte
La naturaleza reactiva de Svelte lo hace excelente para construir aplicaciones multilingües. Sin embargo, manejar enrutamiento, estado y carga de traducciones en SvelteKit requiere una estrategia sólida. Esta guía cubre cómo implementar i18n robusto en aplicaciones Svelte en 2026.
¿Por qué los Desarrolladores Svelte Necesitan i18n?
- Alcance Global: Las apps construidas con Svelte son a menudo performantes e ideales para web móvil, donde las audiencias globales están creciendo.
- Accesibilidad: El soporte de idioma nativo es una parte clave de la accesibilidad web.
- Enrutamiento SvelteKit: Aprovechar el enrutamiento de sistema de archivos de SvelteKit para URLs localizadas (ej.,
/en/about,/fr/about) impulsa el SEO.
Eligiendo una Librería i18n para Svelte
Mientras hay varias opciones, svelte-i18n permanece como el estándar de la comunidad debido a su simplicidad y uso de stores de Svelte.
svelte-i18n
- Pros: Construido sobre stores de Svelte, ligero, soporta carga perezosa (lazy loading).
- Contras: Requiere configuración manual para SSR de SvelteKit.
typesafe-i18n / inlang
- Pros: Seguridad de tipos completa, sobrecarga de tiempo de ejecución cero (se compila).
- Contras: Configuración más estricta, curva de aprendizaje más pronunciada.
Para esta guía, nos enfocaremos en svelte-i18n ya que provee la experiencia de desarrollador más "estilo Svelte".
Implementación Paso a Paso
Paso 1: Instala Dependencias
Terminalnpm install svelte-i18n
Paso 2: Crea Archivos de Traducción
Organiza tus traducciones en archivos JSON. La mejor práctica es dividirlos por locale.
JSON1// src/locales/en.json 2{ 3 "greeting": "Hello, world!", 4 "nav": { 5 "home": "Home", 6 "about": "About" 7 } 8}
JSON1// src/locales/es.json 2{ 3 "greeting": "¡Hola, mundo!", 4 "nav": { 5 "home": "Inicio", 6 "about": "Sobre nosotros" 7 } 8}
Paso 3: Configura i18n
Crea un archivo de inicialización para registrar tus cargadores y establecer el idioma por defecto.
JavaScript1// src/lib/i18n.js 2import { register, init, getLocaleFromNavigator } from 'svelte-i18n'; 3 4register('en', () => import('../locales/en.json')); 5register('es', () => import('../locales/es.json')); 6 7init({ 8 fallbackLocale: 'en', 9 initialLocale: getLocaleFromNavigator(), 10});
Nota: En SvelteKit, quizás quieras determinar initialLocale desde la URL o cookies en lugar de navigator durante SSR.
Paso 4: Usa Traducciones en Componentes
Usa la store t provista por svelte-i18n.
SVELTE1<script> 2 import { t } from 'svelte-i18n'; 3</script> 4 5<h1>{$t('greeting')}</h1> 6 7<nav> 8 <a href="/">{$t('nav.home')}</a> 9 <a href="/about">{$t('nav.about')}</a> 10</nav>
Características Avanzadas
Manejando Pluralización
svelte-i18n usa formato de mensaje ICU para soporte poderoso de pluralización.
JSON{ "messages": "{count, plural, one {You have # message} other {You have # messages}}" }
SVELTE<p>{$t('messages', { values: { count: 5 } })}</p>
Formateo de Fecha y Número
SVELTE1<script> 2 import { date, number } from 'svelte-i18n'; 3 const now = new Date(); 4</script> 5 6<p>Today is {$date(now, { format: 'long' })}</p> 7<p>Cost: {$number(1234.56, { style: 'currency', currency: 'USD' })}</p>
Carga Perezosa de Traducciones (Lazy Loading)
Para apps grandes, no quieres empaquetar todos los idiomas. register() soporta importaciones dinámicas, las cuales SvelteKit maneja automáticamente como chunks.
JavaScriptregister('de', () => import('../locales/de.json'));
Esto asegura que las traducciones alemanas solo se carguen cuando el usuario cambia a Alemán.
Gestionando Traducciones a Escala con IntlPull
A medida que tu app Svelte crece, gestionar múltiples archivos JSON se vuelve desordenado. Las claves se desincronizan, y los traductores luchan con JSON crudo.
IntlPull se integra directamente con tu flujo de trabajo:
- Extraer: Encuentra automáticamente nuevas claves en tus archivos
.svelte. - Subir: Envía claves a IntlPull.
- Traducir: Usa IA o traductores humanos en el dashboard.
- Sincronizar: Trae archivos JSON actualizados de vuelta a tu proyecto.
Terminal# Ejemplo de flujo de trabajo npx @intlpullhq/cli push src/locales/en.json npx @intlpullhq/cli pull --languages es,fr,de
Preguntas Frecuentes
P: ¿Cómo manejo SEO con Svelte i18n?
Respuesta: Para SEO, usa rutas parametrizadas de SvelteKit (ej., [lang]/about). Esto crea URLs únicas para cada idioma. Asegura que estableces el atributo <html lang="en"> dinámicamente en app.html o +layout.svelte basado en la ruta actual.
P: ¿Puedo usar typesafe-i18n con SvelteKit?
Respuesta: Sí, typesafe-i18n es una excelente opción si dependes fuertemente de TypeScript. Genera definiciones TypeScript para tus claves, previniendo errores tipográficos y traducciones faltantes en tiempo de compilación.
P: ¿Funciona svelte-i18n con SSR?
Respuesta: Sí, pero debes asegurar que init() sea llamado durante el handle hook de solicitud del servidor o dentro de la raíz +layout.server.js / +layout.js para establecer el locale correctamente antes de renderizar HTML.
P: ¿Cómo persisto la preferencia de idioma del usuario?
Respuesta: Almacena la preferencia en una cookie o localStorage. En SvelteKit, lee la cookie en hooks.server.js para establecer el locale para el renderizado inicial del servidor, asegurando que no ocurra desajuste de hidratación.
Conclusión
La simplicidad de Svelte se extiende a su ecosistema de internacionalización. Combinando svelte-i18n para traducción en tiempo real e IntlPull para gestión, puedes construir aplicaciones Svelte verdaderamente globales con mínima fricción.
¿Listo para escalar tu app Svelte? Prueba IntlPull gratis y automatiza tu flujo de trabajo de traducción hoy.
