Hablando el mismo idioma: internacionalización de aplicaciones JavaScript

Su aplicación hablará cualquier idioma del mundo

Imagine: creó un servicio increíble, lo publicó en la red, y los usuarios de Alemania, Japón o Brasil cierran el sitio en 10 segundos. ¿Por qué? Porque no entienden ni una palabra de lo que está escrito en los botones. En la era de la globalización, la internacionalización de JavaScript no es un lujo, sino una necesidad básica. Si quiere que su producto conquiste el mundo (o al menos un par de países vecinos), no puede prescindir del i18n en JavaScript.

En este artículo, analizaremos cómo convertir una aplicación común en un políglota multilingüe. Conocerá qué bibliotecas i18n existen, cómo organizar correctamente los archivos de traducción y escribiremos código real para la internacionalización. ¡Allá vamos!

¿Qué es la internacionalización y por qué es necesaria?

El término técnico i18n (donde 18 es el número de letras entre la primera "i" y la última "n") significa la preparación arquitectónica de una aplicación para trabajar con diferentes idiomas y culturas. No es solo traducir palabras: es adaptar formatos de fecha, números, monedas, direcciones de texto (de izquierda a derecha o de derecha a izquierda) e incluso esquemas de colores.

Imagine la fecha "03/04/2025". Para un residente de EE. UU., es el 3 de abril, y para un europeo, el 4 de marzo. ¿Y si su aplicación muestra un precio en dólares a un usuario de Japón? Un desastre. La internacionalización de aplicaciones web resuelve todos estos problemas a nivel de código.

¿Por qué debería empezar ahora mismo?

\n
• Crecimiento de audiencia — el 75% de los usuarios prefiere comprar en su idioma nativo
\n
• Impulso SEO — los motores de búsqueda posicionan mejor los sitios multilingües en los resultados locales
\n
• Usabilidad — reducción de la tasa de rebote y aumento del tiempo en el sitio
\n

Enfoques principales para i18n en JavaScript

Existen dos enfoques globales para la localización de JavaScript: una solución propia y el uso de bibliotecas ya preparadas. Veremos ambos, pero recomiendo encarecidamente la segunda opción: menos errores, más funcionalidades.

Internacionalización propia: ejemplo básico

Si su aplicación es una landing page simple de 10 líneas, puede prescindir de bibliotecas. Creamos un objeto con traducciones:

const translations = {\n    es: {\n        greeting: "¡Hola, mundo!",\n        button: "Haz clic aquí"\n    },\n    en: {\n        greeting: "Hello, World!",\n        button: "Click me"\n    },\n    de: {\n        greeting: "Hallo, Welt!",\n        button: "Klick mich"\n    }\n};

Ahora la función para cambiar de idioma:

function translate(lang) {\n    document.querySelectorAll('[data-i18n]').forEach(el => {\n        const key = el.dataset.i18n;\n        if (translations[lang] && translations[lang][key]) {\n            el.textContent = translations[lang][key];\n        }\n    });\n}\n\n// Uso en HTML:\n// <h1 data-i18n="greeting">¡Hola, mundo!</h1>\n// <button data-i18n="button">Haz clic aquí</button>

Esto funciona, pero imagine que tiene 500 líneas de texto, además de que necesita manejar pluralización (1 manzana, 2 manzanas, 5 manzanas) e interpolación (Hola, {username}). Aquí es donde las bibliotecas de internacionalización vienen al rescate.

Principales bibliotecas i18n para JavaScript

El mercado de bibliotecas i18n es diverso. Aquí hay tres líderes que merecen su atención:

1. i18next — el rey entre las bibliotecas

i18next JavaScript es el estándar de facto. Funciona con React, Vue, Angular y JS puro. Soporta pluralización, interpolación, traducciones anidadas y carga de recursos bajo demanda.

import i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\n\ni18n.use(initReactI18next).init({\n    resources: {\n        en: {\n            translation: {\n                welcome: "Welcome b