Panoramica

In gt-next 6.6.0 stiamo introducendo un nuovo approccio all’internazionalizzazione delle app "brownfield". Presentiamo la funzione t.obj(), che può restituire strutture di dizionari tradotte.

Motivazione

"Brown field" e "green field" sono termini presi in prestito dallo sviluppo immobiliare. Un green field è un lotto senza strutture esistenti, mentre un brown field ha strutture esistenti. Nell'i18n, questo si traduce in app senza infrastruttura i18n (green field) rispetto ad app che dispongono già di un'infrastruttura i18n (brown field).

Finora la nostra libreria si è concentrata in modo molto deciso sull'internazionalizzazione di app "green field". Il componente <T> o l'hook useGT() ne sono due esempi.

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

Abbiamo scoperto che gli sviluppatori spesso si aspettano che la loro libreria i18n restituisca sottoalberi del dizionario, non solo stringhe. Questo rende essenziale che gt-next supporti questa funzionalità quando gli sviluppatori passano da altre librerie i18n.

Utilizzo

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

{
  "cards": [
    {
      "title": "Scheda 1",
      "description": "Descrizione della scheda 1"
    },
    {
      "title": "Scheda 2",
      "description": "Descrizione della scheda 2"
    },
    {
      "title": "Scheda 3",
      "description": "Descrizione della scheda 3"
    }
  ]
}

Con il nostro approccio precedente, era necessario accedere a ogni elemento singolarmente usando la sua 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 poco scalabile e difficile da manutenere.

La nuova funzione t.obj() offre un modo potente 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 significativo nel rendere gt-next più versatile sia per applicazioni greenfield che brownfield. Consentendo agli sviluppatori di lavorare direttamente con i sottoalberi del dizionario, eliminiamo un importante punto di attrito nel processo di internazionalizzazione delle applicazioni esistenti.

Questo miglioramento avvicina gt-next all'esperienza di sviluppo che i team si aspettano dalle moderne librerie i18n, rendendo più semplice iterare sui contenuti tradotti e creare applicazioni internazionalizzate più dinamiche e facili da mantenere.