blog de 18ways

i18n está roto: deja de escribir claves de traducción

Una forma nativa de IA para hacer i18n en Next.js, sin romper el SEO.

La internacionalización (a menudo abreviada como i18n), la localización (l10n) y el soporte multilingüe describen la misma idea: adaptar tu producto para que las personas puedan usarlo en su propio idioma.

i18n sigue construido como si fuera 2005

Cada negocio eventualmente se da cuenta de que necesita soportar múltiples idiomas. En ese momento, el equipo de producto se recuesta como un mecánico, succiona aire entre los dientes y dice: “¿Cuántas páginas estamos hablando? Eso son al menos cuatro sprints.”

Una reacción al estilo mecánico ante el costo y el esfuerzo del trabajo tradicional de i18n

La forma subyacente en que implementamos la i18n no ha cambiado en 20 años. La mayoría de las "mejores prácticas" de i18n se formaron mucho antes de las arquitecturas web modernas, y todo lo que ha sucedido desde entonces simplemente se ha añadido encima de ellas.

I18n es la única parte del desarrollo web moderno que aún implica exportar archivos y enviarlos a alguien. Se considera una configuración moderna si, en lugar de enviarlos por correo electrónico, los subes a través de una API.

En un mundo de pipelines de CI y despliegues medidos en minutos en lugar de días, probablemente deberíamos considerarnos afortunados de no tener que enviar nada por fax.

Por qué i18n se siente roto

El desarrollo web moderno ha avanzado increíblemente rápido.

Tenemos:

Sin embargo, los flujos de trabajo de internacionalización aún se sienten como si pertenecieran a una era diferente.

Incluso las aplicaciones relativamente pequeñas terminan rápidamente manejando:

Los desarrolladores no se proponen construir sistemas como este. Se topan con ello, ya que los obstáculos comunes de i18n hacen tropezar a los desarrolladores que no están familiarizados con cómo diferentes idiomas estructuran las oraciones de manera completamente diferente... y aceptan a regañadientes el statu quo establecido hace 20 años.

Con el tiempo, la internacionalización se convierte en una de las partes más complejas de la pila.


La interfaz de usuario moderna no encaja dentro de las cadenas de traducción

Considera una interfaz de usuario simple:

jsx
<h1>Hello world!</h1>
<p>
  <a href="#/">Click here</a> to view your <b>{serverResponse.productDescription}</b>
</p>

Esto es fácil de entender. Es simple.

En algún momento decidimos internacionalizarlo. Así que, extraemos el texto a un archivo de traducción:

json
{
  "mainPage": {
    "greeting": "Hello world",
    "cta": "<0>Click here</0> to view your <1>{{description}}</1>"
  }
}

Y hacemos referencia a eso en nuestro código:

jsx
<h1>{t('mainPage.greeting')}</h1>
<p>
  <Trans key="mainPage.cta">
    <a href="#/">Click here</a> to view your <b>{{ description: serverResponse.productDescription }}</b>
  </Trans>
</p>

Pero, espera, ¿ahora tenemos texto en inglés tanto en nuestro código como en nuestro archivo de traducción? Sí. Diferentes bibliotecas de i18n le dan diferentes estilos, pero intentar traducir texto que está parcialmente formateado sacándolo a un archivo JSON legible por humanos es una batalla perdida.

La interfaz de usuario moderna está estructurada, pero los sistemas de traducción se basan en la fundación de cadenas planas.

Una vez que el marcado, las variables y el contenido dinámico entran en juego, la abstracción comienza a filtrarse.

El contenido dinámico y generado por el usuario rompe con la i18n tradicional

Las cosas se vuelven aún más difíciles cuando el contenido no es estático.

Toma este ejemplo de nuevo:

jsx
<b>{serverResponse.productDescription}</b>

Esa cadena proviene de una API. ¿Cómo la convertimos en una clave de traducción?

Spoiler: no lo haces. Ahora tu backend también necesita soportar la internacionalización.

Tu backend ahora debe gestionar:

Los traductores de repente también necesitan acceso a los sistemas de backend.

Y el problema solo crece cuando el contenido generado por los usuarios entra en la ecuación.

Reseñas. Comentarios. Listados de mercado. Foros.

Las pipelines de i18n tradicionales asumen que los desarrolladores controlan todo el texto. Cada vez más, eso simplemente no es cierto.

El hecho de que empresas como Amazon hayan comenzado a experimentar con reseñas de usuarios traducidas en 2026 dice mucho sobre lo lentamente que ha evolucionado el ecosistema de i18n.

La detección de locales sigue siendo un desastre

Incluso determinar qué idioma quiere un usuario es sorprendentemente complicado.

Los navegadores envían preferencias de idioma a través del encabezado Accept-Language:

text
Accept-Language: en-GB,en;q=0.9,fr;q=0.8

Esto le dice al servidor:

  1. Prefiere el inglés británico
  2. Entonces cualquier forma de inglés
  3. Entonces cualquier forma de francés

En la práctica, implementar esto correctamente implica:

Muchos frameworks dejan la mayor parte de esta lógica a los desarrolladores.

Incluso la detección básica de la configuración regional a menudo se convierte en código de aplicación personalizado.

El cambio de idioma es una idea secundaria

La infraestructura de traducción es solo la mitad del problema.

Los usuarios aún necesitan una forma de cambiar de idioma.

La mayoría de las bibliotecas de i18n proporcionan la capa de traducción, pero dejan el resto del problema al desarrollador:

Estos detalles parecen pequeños, pero rápidamente se convierten en una cantidad significativa de infraestructura de aplicación, especialmente si no estás familiarizado con todas las complejidades de i18n. La mayoría de las empresas y desarrolladores no lo están.

El Atajo: Traducción Automática de Sitios Web

Dada toda esta complejidad, algunos equipos recurren a herramientas de traducción automática de sitios web. Estas plataformas prometen traducir tu sitio automáticamente con un esfuerzo mínimo.

Varias empresas están desarrollando versiones cada vez más sofisticadas de esta idea. Desafortunadamente, introducen un conjunto diferente de problemas:

El resultado suele ser un sitio que técnicamente soporta múltiples idiomas, pero ofrece una experiencia notablemente peor y es una caja negra para que los desarrolladores trabajen.

Cómo Terminamos Aquí

Comenzamos con algo bellamente simple:

jsx
<h1>Hello world!</h1>
<p>
  <a href="#/">Click here</a> to view your <b>{serverResponse.productDescription}</b>
</p>

Y terminé con claves de traducción, diccionarios JSON, tuberías fracturadas, capas de localización de backend y frontend separadas, y herramientas de traducción externas.

Las aplicaciones web modernas son sistemas increíblemente sofisticados. Sin embargo, las herramientas de i18n esperan flujos de trabajo diseñados para una era diferente, como un Ferrari con una manivela para arrancar el motor.

Repensando el Modelo

¿Qué pasaría si la internacionalización se viera más así?

jsx
<h1><T>Hello world!</T></h1>
<p>
  <T>
    <a href="#/">Click here</a> to view your <b>{serverResponse.productDescription}</b>
  </T>
</p>

No hay claves de traducción.

No hay diccionarios JSON.

No hay tuberías manuales.

Solo texto.

Un Enfoque Diferente

Esta idea es la base detrás de 18ways.

18ways trata la traducción como una preocupación optimizada en tiempo de ejecución. Extraer claves de traducción y gestionar archivos de traducción es un problema para las máquinas, no para los humanos.

Los desarrolladores simplemente marcan el texto que desean traducir.

Detrás de cámaras, 18ways:

Todo sigue siendo amigable con SSR y seguro para SEO.

Traducciones Conscientes del Contexto

Los sistemas de i18n tradicionales pierden contexto.

Un traductor podría ver algo como:

text
home

¿Pero qué significa eso?

En alemán, estos significados requieren palabras completamente diferentes:

Si tuvieras que traducir "home" al alemán, ¿qué preferirías ver? ¿Una cadena aislada, o la página donde realmente aparece?

Comparación entre traducir una cadena JSON aislada y traducir dentro del contexto completo del sitio web

Los sistemas de traducción que solo ven cadenas aisladas tienen dificultades con estas distinciones.

18ways analiza traducciones en el contexto de la interfaz de usuario real.

Nuestros agentes de backend revisan las traducciones a medida que aparecen en páginas reales y optimizan para:

Para cualquiera que esté familiarizado con los sustantivos compuestos en alemán, no se preocupe, la detección de desbordamiento también está incluida.

Empoderando a los Traductores Humanos

Todo lo que ayuda a la IA a producir mejores traducciones también ayuda a los traductores humanos.

18ways proporciona a los traductores el mismo entorno consciente del contexto que utilizan nuestros agentes de IA.

En lugar de editar archivos JSON, los traductores revisan el texto directamente en la interfaz de usuario donde aparece.

Esto mejora drásticamente la precisión de la traducción y la eficiencia del flujo de trabajo.

Cómo se ve una mejor internacionalización (i18n)

La internacionalización no necesita otra capa de claves de traducción, archivos de cadenas y pegamento de tuberías.

Las aplicaciones modernas ya tienen la estructura, el contexto y la información de tiempo de ejecución que necesitamos para hacer esto mejor.

La próxima generación de i18n debería estar diseñada para aplicaciones renderizadas en el servidor, contenido dinámico, flujos de trabajo nativos de IA y traductores humanos trabajando codo a codo.

Esa es la dirección que está tomando 18ways.

i18n está roto: Deja de escribir claves de traducción | Blog de 18ways