Resumen

En gt-next 6.6.0, estamos adoptando un nuevo enfoque para internacionalizar aplicaciones "brown field". Presentamos la función t.obj(), que puede devolver estructuras de diccionario 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 ya tiene estructuras. 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 librería se ha centrado casi por completo en internacionalizar apps "green field". Considera, 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: solo devuelve cadenas, no subárboles del diccionario.

Lo que hemos descubierto es que los desarrolladores suelen esperar que su librería de i18n devuelva subárboles del diccionario, no solo cadenas. Por eso, es fundamental que gt-next admita esta funcionalidad cuando los desarrolladores migran desde otras librerías de i18n.

Uso

Considera la siguiente estructura de diccionario, donde tienes una lista de elementos que quieres recorrer:

{
  "cards": [
    {
      "title": "Card 1",
      "description": "Card 1 description"
    },
    {
      "title": "Card 2",
      "description": "Card 2 description"
    },
    {
      "title": "Card 3",
      "description": "Card 3 description"
    }
  ]
}

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 mantenible.

La nueva función t.obj() ofrece una forma potente de acceder a las estructuras del 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 importante para hacer que gt-next sea más versátil tanto en aplicaciones green field como brown field. Al permitir que los desarrolladores trabajen directamente con subárboles de diccionario, eliminamos uno de los principales puntos de fricción a la hora de internacionalizar aplicaciones existentes.

Esta mejora acerca gt-next a la experiencia de desarrollo que los equipos esperan de las bibliotecas modernas de i18n, ya que facilita iterar sobre contenido traducido y crear aplicaciones internacionalizadas más dinámicas y fáciles de mantener.