Panoramica

In gt-next 6.6.0, stiamo adottando un nuovo approccio all'internazionalizzazione delle app "brown field". Introduciamo la funzione t.obj(), che può restituire strutture dizionario tradotte.

Motivazione

"Brown field" e "green field" sono termini presi in prestito dal settore immobiliare. Un green field è un lotto privo di strutture esistenti, mentre un brown field presenta già delle strutture. Nell'i18n, questo corrisponde ad app senza infrastruttura i18n (green field) contrapposte ad app che dispongono già di un'infrastruttura i18n (brown field).

Finora la nostra libreria si è concentrata quasi esclusivamente sull'internazionalizzazione di app "green field". Ne sono esempi il componente <T> e l'hook useGT().

L'unica infrastruttura che abbiamo realizzato specificamente per le app "brown field" sono gli hook const t = useTranslations() e const t = getTranslations(), modellati sul pattern a dizionario di next-intl. Tuttavia, la nostra funzione t() è stata finora limitata: restituisce solo stringhe, non sottoalberi del dizionario.

Abbiamo scoperto che gli sviluppatori spesso si aspettano che la propria libreria i18n restituisca sottoalberi del dizionario, non solo stringhe. Per questo è fondamentale che gt-next supporti questa funzionalità quando gli sviluppatori migrano da altre librerie i18n.

Utilizzo

Considera la seguente struttura del dizionario, in cui hai un elenco di elementi su cui vuoi iterare:

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

Con il nostro approccio precedente, avresti dovuto accedere a ciascun elemento singolarmente usando la relativa chiave esatta:

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

Questo approccio chiaramente non è né scalabile né facile da mantenere.

La nuova funzione t.obj() offre un modo efficace per accedere alle strutture del dizionario come sottoalberi:

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

Conclusione

La funzione t.obj() rappresenta un passo avanti importante nel rendere gt-next più versatile sia per le applicazioni green field sia per quelle brown field. Consentendo agli sviluppatori di lavorare direttamente con i sottoalberi del dizionario, eliminiamo uno dei principali ostacoli all'internazionalizzazione delle applicazioni esistenti.

Questo miglioramento avvicina gt-next all'esperienza di sviluppo che i team si aspettano dalle moderne librerie di i18n, semplificando l'iterazione sui contenuti tradotti e la creazione di applicazioni internazionalizzate più dinamiche e facili da manutenere.