Cómo añadir varios idiomas a tu app o web

Para añadir varios idiomas a una app, pasa todo el texto de la interfaz a archivos de traducción (uno por idioma), cárgalos con una biblioteca de i18n y añade un selector de idioma que recuerde la elección. En las páginas públicas que quieras que se encuentren en buscadores, asigna a cada idioma su propia URL, como /fr/, y enlaza las versiones con etiquetas hreflang. Después, ocúpate de lo que suele olvidarse: fechas, números y monedas, textos más largos en algunos idiomas, escrituras de derecha a izquierda y el contenido almacenado en tu base de datos.

Términos que oirás

• Internacionalización (i18n): preparar el código para admitir cualquier idioma, sin cadenas de texto fijas, con formatos adaptados a cada configuración regional y diseños flexibles. El «18» es el número de letras que hay entre la i y la n.
• Localización (l10n): adaptar la app a un idioma o mercado concreto, sobre todo traducción, aunque a veces también moneda, imágenes y textos legales.
• Configuración regional (locale): un idioma y, opcionalmente, una región, como en-GB o pt-BR.

Haz la i18n una sola vez, y añadir cada nuevo idioma pasará a ser casi solo trabajo de traducción.

Opciones y compromisos

Para la mayoría de apps, una biblioteca i18n estándar con archivos de traducción es la base adecuada. Si quieres, crea borradores con traducción automática o con IA y que hablantes nativos revisen lo que más ven los clientes.

Las partes de una app multilingüe

Archivos de traducción

En lugar de <h1>Bienvenido de nuevo</h1>, el código dice t('dashboard.welcome'), y cada configuración regional tiene un archivo con el texto:

{
  "dashboard": {
    "welcome": "Bienvenido de nuevo, {{name}}",
    "items_one": "{{count}} elemento",
    "items_other": "{{count}} elementos"
  }
}

Usa marcadores de posición para las variables en lugar de unir fragmentos de frase, porque el orden de las palabras cambia de un idioma a otro. Y usa las reglas de plural de la biblioteca: el español tiene dos formas (1 elemento, 2 elementos), pero algunos idiomas tienen tres, cuatro o más.

Formato de fechas, números y dinero

No los formatees a mano. La API Intl del navegador da formato para cualquier configuración regional: 1,234.5 en inglés es 1.234,5 en español de España; las fechas cambian entre día-mes y mes-día; los símbolos de moneda cambian de lugar. Guarda las fechas en UTC y el dinero como números con un código de moneda, y da formato solo al mostrarlo.

Diseños que se estiran

El texto traducido suele ser más largo que el inglés; sobre todo el alemán y el finlandés. Evita botones de ancho fijo y etiquetas cortadas, y prueba con tu idioma más largo.

Idiomas de derecha a izquierda

El árabe, el hebreo, el persa y el urdu se leen de derecha a izquierda. Pon dir="rtl" en la página para esas configuraciones regionales y usa propiedades lógicas de CSS (margin-inline-start en lugar de margin-left; en Tailwind, ms-4 en lugar de ml-4) para que el diseño se refleje solo. Los iconos que indican dirección, como las flechas, también deben invertirse.

Selector de idioma y detección

Muestra un selector en todas las páginas, con el nombre de cada idioma en su propia lengua («Deutsch», «Français», «العربية») en lugar de banderas, porque las banderas representan países, no idiomas. Detecta el idioma preferido del navegador en la primera visita para sugerir una versión, pero deja que prevalezca la elección explícita del visitante y recuérdala.

URLs y SEO

Para las páginas que quieras que aparezcan en los resultados de búsqueda, cada idioma necesita su propia URL. A fecha de septiembre de 2026, las recomendaciones de Google para webs multilingües son:

• URLs separadas por idioma: los subdirectorios (example.com/fr/) son lo más sencillo; los subdominios y los dominios por país también funcionan. Los parámetros de URL (?lang=fr) no se recomiendan.
• No cambies de idioma solo con una cookie o con la configuración del navegador; el rastreador de Google podría no ver nunca las demás versiones.
• No redirijas automáticamente según el idioma; enlaza entre versiones.
• Usa hreflang para indicar a Google qué páginas son traducciones unas de otras. Cada versión debe incluirse a sí misma y a todas las demás, o las anotaciones pueden ignorarse. Añade x-default para la página de reserva.
• Google detecta el idioma de una página a partir de su contenido visible, no de lang ni de hreflang; por eso traduce la página entera, no solo el menú.

Aun así, pon <html lang="fr"> en cada versión: los lectores de pantalla lo usan para elegir la pronunciación correcta, lo que es un requisito de accesibilidad.

Las pantallas de la app para usuarios registrados no necesitan indexarse, así que para ellas basta con guardar el idioma en el perfil del usuario. Consulta SEO para webs creadas con IA para lograr que las páginas públicas se rastreen.

Contenido en tu base de datos

El texto de la interfaz vive en archivos; el contenido, como nombres de productos, entradas de blog y categorías, vive en la base de datos. Dos patrones habituales:

• Una tabla de traducciones: product_translations (product_id, locale, name, description). Es limpia y escala a muchos idiomas.
• Una columna JSON por campo: name: {"en": "...", "fr": "..."}. Es más simple para pocos idiomas.

Decide qué pasa cuando falta una traducción: normalmente se recurre al idioma por defecto en lugar de mostrar un hueco en blanco.

Correos y notificaciones

Guarda el idioma de cada usuario y úsalo también para los correos, las notificaciones y los PDF. Es fácil traducir la app y olvidar que el correo de bienvenida sigue llegando en inglés.

Prompts que funcionan

Añade internacionalización con react-i18next. Pasa cada cadena visible para el usuario a locales/en.json con claves con espacio de nombres, usa interpolación y reglas de plural en lugar de concatenar cadenas, y da formato a las fechas, los números y los precios con Intl según la configuración regional actual. Todavía no cambies ningún texto.

Añade francés y alemán. Las páginas públicas de marketing tendrán los prefijos de URL /fr/ y /de/ con el inglés en la raíz, enlaces hreflang en cada página (incluida la autorreferencia y x-default) y html lang definido por página. Añade un selector de idioma que muestre el nombre nativo de cada idioma. En las páginas para usuarios registrados, guarda el idioma en el perfil del usuario.

Añade árabe con soporte de derecha a izquierda: pon dir="rtl" para el árabe, sustituye los márgenes y rellenos izquierdo y derecho por propiedades lógicas, invierte los iconos direccionales y comprueba que los formularios y las tablas se siguen leyendo bien.

Paso a paso

1. Elige tu primer idioma adicional según la demanda real: dónde están tus visitantes o clientes.
2. Internacionaliza el código: pasa las cadenas a archivos y añade plurales y formato con Intl. Publícalo solo en inglés y comprueba que nada ha cambiado.
3. Decide la estructura de URLs de las páginas públicas y añade hreflang.
4. Traduce: crea un borrador con traducción automática o con IA y revísalo con una persona con nivel nativo. Da contexto a los traductores: una palabra como «Book» es un sustantivo en una pantalla y un verbo en otra.
5. Traduce el contenido de la base de datos y define los valores de reserva.
6. Localiza el resto: correos, mensajes de error, páginas legales e imágenes con texto.
7. Prueba cada idioma en el ancho de un móvil y, si procede, con escritura de derecha a izquierda.
8. Establece un proceso para que las nuevas funciones salgan con sus traducciones, no meses después.

Errores habituales

• Concatenar frases ("Tienes " + n + " mensajes"), lo que se rompe en otros idiomas.
• Dejar texto fijo en los componentes, en los mensajes de error y en las cadenas de validación.
• Dar formato a las fechas y los precios a mano.
• Usar banderas como idiomas, y redirecciones automáticas que dejan a las personas atrapadas en la versión equivocada.
• Una sola URL para todos los idiomas en las páginas que quieres indexar.
• Olvidar los enlaces de retorno de hreflang, así que Google ignora las anotaciones.
• Traducir la interfaz pero no el contenido, o al revés.
• Traducción automática sin revisar en las páginas de precios, legales y de pago.

Lista de comprobación multilingüe

• Ninguna cadena visible para el usuario escrita a mano; se usan reglas de plural y marcadores de posición
• Fechas, números y monedas con formato de Intl
• Selector de idioma con nombres nativos en todas las páginas; elección recordada
• URLs separadas por idioma en las páginas públicas; sin redirecciones forzadas
• hreflang en cada versión, incluidas la propia y x-default
• html lang (y dir="rtl" cuando haga falta) definido por página
• Contenido de la base de datos traducido, con valores de reserva razonables
• Correos y notificaciones enviados en el idioma del usuario
• Textos para clientes revisados por una persona con nivel nativo

Varios idiomas en Mythex

En Mythex, añades idiomas pidiéndolo en el chat; no hay un panel de traducción aparte, así que los prompts de arriba funcionan tal cual. Haz primero el paso de internacionalización y compruébalo en la vista previa antes de añadir idiomas: es una refactorización grande, y un punto de control del chat te permite volver atrás si algo se rompe (chat y puntos de control). Si quieres que la app traduzca contenido automáticamente con una IA o una API de traducción, eso usa tu propia clave de API, guardada en los ajustes del proyecto (variables de entorno y secretos); cómo usar APIs de LLM explica los costes. Vuelve a publicar cuando los nuevos idiomas estén listos.

Preguntas