Descripción general

En gt-next 6.6.0 estamos adoptando un nuevo enfoque para internacionalizar aplicaciones brownfield. Estamos introduciendo la función t.obj(), que puede devolver estructuras de diccionario ya traducidas.

Motivación

"Brown field" y "green field" son términos tomados del desarrollo inmobiliario. Un green field es un terreno sin estructuras existentes, mientras que un brown field sí las tiene. En i18n, esto se traduce en apps sin infraestructura de i18n (green field) frente a apps que ya cuentan con infraestructura de i18n (brown field).

Hasta ahora, nuestra biblioteca se ha centrado sobre todo en internacionalizar apps "green field". Por ejemplo, el componente <T> o el hook useGT().

La única infraestructura que hemos creado específicamente para apps "brown field" son los hooks const t = useTranslations() y const t = getTranslations(), basados en el patrón de diccionario de next-intl. Sin embargo, nuestra función t() ha sido limitada, ya que solo devuelve strings, no subárboles del diccionario.

Hemos descubierto que los desarrolladores a menudo esperan que su biblioteca de i18n devuelva subárboles del diccionario, no solo strings. Esto hace que sea esencial que gt-next admita esta funcionalidad cuando los desarrolladores están realizando la transición desde otras bibliotecas de i18n.

Uso

Considera la siguiente estructura de diccionario en la que tienes una lista de elementos sobre la que quieres iterar:

{
  "cards": [
    {
      "title": "Tarjeta 1",
      "description": "Descripción de la tarjeta 1"
    },
    {
      "title": "Tarjeta 2",
      "description": "Descripción de la tarjeta 2"
    },
    {
      "title": "Tarjeta 3",
      "description": "Descripción de la tarjeta 3"
    }
  ]
}

Con nuestro enfoque anterior, tendrías que acceder a cada elemento por separado usando su clave exacta:

import { useTranslations } from 'gt-next'

export default function Page() {
  const t = useTranslations()

  return (
    <>
      <div>
        {t('cards.0.title')}
        {t('cards.0.description')}
      </div>
      <div>
        {t('cards.1.title')}
        {t('cards.1.description')}
      </div>
      <div>
        {t('cards.2.title')}
        {t('cards.2.description')}
      </div>
    </>
  )
}

Este enfoque claramente no es escalable ni fácil de mantener.

La nueva función t.obj() ofrece una forma muy potente de acceder a estructuras de diccionario como subárboles:

import { useTranslations } from 'gt-next'

export default function Page() {
  const t = useTranslations()

  return (
    <>
      <div>
        {t.obj('cards').map((card) => (
          <div key={card.title}>
            {card.title}
            {card.description}
          </div>
        ))}
      </div>
    </>
  )
}

Conclusión

La función t.obj() representa un avance significativo para hacer que gt-next sea más versátil tanto para aplicaciones nuevas como para aplicaciones ya existentes. Al permitir que los desarrolladores trabajen directamente con subárboles del diccionario, eliminamos un punto de fricción importante en la internacionalización de aplicaciones existentes.

Esta mejora acerca gt-next a la experiencia de desarrollo que los equipos esperan de las bibliotecas de i18n modernas, facilitando la iteración sobre el contenido traducido y la creación de aplicaciones internacionalizadas más dinámicas y mantenibles.