Construir para una audiencia global significa que tu aplicación debe hablar varios idiomas, mostrar formatos correctos de fecha y número, y manejar matices culturales. La internacionalización (i18n) es la arquitectura que hace esto posible.
Esta guía cubre estrategias prácticas de i18n para aplicaciones web.
Estrategias de URL
La primera decisión es cómo estructurar tus URLs. Existen tres enfoques habituales:
Subdominio: de.example.com, fr.example.com. Requiere configuración DNS separada y los buscadores pueden tratarlos como sitios independientes. Bueno para contenido muy diferente por región.
Subdirectorio (prefijo): example.com/de/, example.com/fr/. El enfoque más común. Fácil de implementar, recomendado por Google y preserva la equidad de los enlaces.
Parámetro de consulta: example.com?lang=de. No recomendado. Las URLs son menos limpias y algunos buscadores pueden no indexar todas las variantes de idioma.
Gestión de traducciones
Archivos de traducción en JSON son el enfoque estándar:
{
"common": {
"welcome": "Bienvenido a nuestra plataforma",
"cta": "Comenzar"
}
}
Crea un archivo separado para cada idioma: en/common.json, es/common.json, de/common.json.
Librerías de traducción:
- next-intl: diseñada específicamente para Next.js, soporta App Router y Pages Router
- react-i18next: la librería i18n de React más popular, ecosistema maduro
- lingui: extracción en tiempo de compilación, tamaño de bundle más pequeño
Consideraciones clave:
- Usa interpolación (variables en cadenas traducidas), no concatenación de strings
- Maneja reglas de pluralización (el inglés tiene dos, el árabe seis, el japonés ninguna)
- Soporta traducciones con conciencia de género cuando sea necesario
- Extrae claves de traducción automáticamente para detectar traducciones faltantes
Formato de fecha, hora y números
Codificar formatos de fecharompe la internacionalización. Usa la API Intl incorporada en los navegadores modernos:
new Intl.DateTimeFormat("es-ES").format(new Date());
// "20/6/2025"
new Intl.NumberFormat("es-ES").format(1234567.89);
// "1.234.567,89"
La API Intl maneja las reglas de formato para cada locale sin librerías externas.
Soporte para derecha a izquierda (RTL)
Idiomas como el árabe y el hebreo se leen de derecha a izquierda. Para CSS, evita valores fijos de izquierda/derecha. Usa propiedades lógicas:
.container {
margin-inline-start: 1rem;
padding-inline-end: 2rem;
}
Estas se invierten automáticamente para idiomas RTL. Prueba los diseños RTL al principio — adaptar el soporte RTL después es significativamente más costoso.
SEO para sitios multilingües
- Usa etiquetas
hreflangpara indicar a los buscadores qué versión de idioma mostrar:<link rel="alternate" hreflang="de" href="https://example.com/de/" /> <link rel="alternate" hreflang="en" href="https://example.com/en/" /> <link rel="alternate" hreflang="x-default" href="https://example.com/" /> - Establece el atributo
langen el elemento<html> - Traduce los metadatos (etiquetas title, meta descriptions) para cada idioma
- Evita la traducción automática para contenido importante — invierte en traducción profesional
Consideraciones de rendimiento
Cargar todas las traducciones por adelantado infla el bundle. Carga solo las traducciones del locale activo. Usa importaciones dinámicas o una librería que cargue las traducciones de forma perezosa.
Para sitios estáticos internacionalizados, genera páginas separadas para cada locale en tiempo de compilación. Next.js soporta esto con generateStaticParams.
La internacionalización es una inversión en alcance global. Bien hecha, abre tu aplicación a usuarios de todo el mundo sin comprometer la calidad ni el rendimiento.
¿Estás expandiendo tu aplicación web a mercados internacionales? En Vynta implementamos sistemas i18n de nivel profesional que manejan traducciones, localización y SEO multilingüe.