Aperçu

Avec gt-next 6.6.0, nous adoptons une nouvelle approche pour l’internationalisation des applications « brown field ». Nous introduisons la fonction t.obj(), qui peut renvoyer des structures de dictionnaire traduites.

Motivation

« Brown field » et « green field » sont des termes empruntés au développement immobilier. Un green field désigne un terrain sans structure existante, tandis qu'un brown field désigne un terrain où des structures existent déjà. En i18n, cela correspond aux applications sans infrastructure i18n (green field), par opposition aux applications qui disposent déjà d'une infrastructure i18n (brown field).

Jusqu'à présent, notre bibliothèque s'est surtout concentrée sur l'internationalisation des applications « green field ». Le composant <T> et le hook useGT() en sont de bons exemples.

La seule infrastructure que nous ayons créée spécifiquement pour les applications « brown field », ce sont les hooks const t = useTranslations() et const t = getTranslations(), calqués sur le modèle de dictionnaire de next-intl. Cependant, notre fonction t() était limitée : elle ne renvoyait que des chaînes, et non des sous-arbres de dictionnaire.

Nous avons constaté que les développeurs s'attendent souvent à ce que leur bibliothèque i18n renvoie des sous-arbres de dictionnaire, pas seulement des chaînes. Il est donc essentiel que gt-next prenne en charge cette fonctionnalité lorsque des développeurs migrent depuis d'autres bibliothèques i18n.

Utilisation

Considérez la structure de dictionnaire suivante, avec une liste d’éléments à parcourir :

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

Avec notre approche précédente, il fallait accéder à chaque élément séparément en utilisant sa clé exacte :

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>
    </>
  )
}

Cette approche n’est clairement ni évolutive ni facile à maintenir.

La nouvelle fonction t.obj() offre un moyen efficace d’accéder aux structures de dictionnaire sous forme de sous-arbres :

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>
    </>
  )
}

Conclusion

La fonction t.obj() marque une avancée importante pour rendre gt-next plus polyvalent, aussi bien pour les applications green field que pour les applications brown field. En permettant aux développeurs de travailler directement avec des sous-arbres de dictionnaire, nous éliminons un point de friction majeur dans l’internationalisation des applications existantes.

Cette amélioration rapproche gt-next de l’expérience développeur que les équipes attendent des bibliothèques d’i18n modernes, en facilitant le parcours du contenu traduit et la création d’applications internationalisées plus dynamiques et plus faciles à maintenir.