# General Translation Changelog: gt-react 10.12.0: Traduzione a livello di modulo con t()
URL: https://generaltranslation.com/it/blog/gt-react_v10_12_0.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 
Authors: Ernest McCarter
Published: 2026-03-16

## Panoramica

`gt-react` ora esporta una funzione [`t()`](/docs/react/reference/functions/t-function) per la traduzione sincrona delle stringhe a livello di modulo nel browser.

Finora, per tradurre stringhe in `gt-react` servivano hook basati sul contesto di React come [`useGT`](/docs/react/reference/hooks/use-gt). Gli hook funzionano bene all'interno dei componenti, ma non coprono un caso comune: tradurre stringhe a livello di modulo — fuori dai componenti React, prima del rendering, in semplici file di utilità.

[`t()`](/docs/react/reference/functions/t-function) colma questa lacuna. È una funzione sincrona che puoi chiamare ovunque nel codice eseguito nel browser:

```tsx
import { t } from 'gt-react/browser';

const greeting = t('Hello, world!');
```

Nessun hook, niente async, senza bisogno di un albero di componenti.

## Perché questo approccio

L'idea alla base di questa PR è sperimentare un'alternativa all'approccio alla traduzione basato sul contesto React. Operando al di fuori dell'albero dei componenti, [`t()`](/docs/react/reference/functions/t-function) consente pattern più interessanti — in particolare, la traduzione a livello di modulo. Le stringhe possono essere tradotte nel punto in cui vengono definite, non in quello in cui vengono renderizzate.

Questo comporta alcuni compromessi:

* **Solo lato client.** [`t()`](/docs/react/reference/functions/t-function) funziona solo nelle applicazioni React lato client. Si basa sull'esecuzione dei moduli nel browser per caricare le traduzioni prima del rendering dell'app.
* **Ricaricamento completo della pagina per cambiare lingua.** Poiché le traduzioni vengono risolte al caricamento del modulo, cambiare impostazione regionale richiede di rieseguire i moduli, quindi un refresh completo della pagina. Non è possibile cambiare lingua al volo durante la sessione.

D'altra parte, l'esperienza di sviluppo migliora notevolmente. Niente hook per avvolgere le stringhe, niente logica a livello di componente, niente boundary asincroni — solo una chiamata di funzione.

Gli approcci esistenti basati sul contesto React ([`useGT`](/docs/react/reference/hooks/use-gt), [`<T>`](/docs/react/reference/components/t), ecc.) non scompariranno. Questa è un&#39;opzione aggiuntiva per i progetti in cui questi compromessi hanno senso.

## Come funziona

[`t()`](/docs/react/reference/functions/t-function) risolve le traduzioni in modo sincrono da quelle caricate in anticipo. Queste traduzioni vengono inizializzate da `bootstrap()`, una nuova funzione di setup asincrona che carica tutte le traduzioni per l&#39;impostazione regionale corrente prima che la tua app venga renderizzata.

Devi modificare l&#39;entry point della tua app in modo da eseguire prima `bootstrap()`. Di solito è `main.tsx`, ma puoi cambiare l&#39;entry point nel tuo `index.html`.

```tsx
// bootstrap.tsx (new entry point)
import gtConfig from '../gt.config.json';
import { bootstrap } from 'gt-react/browser';

async function loadTranslations(locale: string) {
  return (await import(`./_gt/${locale}.json`)).default;
}

await bootstrap({
  ...gtConfig,
  loadTranslations,
});

await import('./main.tsx');
```

La funzione [`loadTranslations`](/docs/react/reference/functions/load-translations) è asincrona: prima carica le traduzioni, poi l&#39;app React viene importata ed eseguita. È così che [`t()`](/docs/react/reference/functions/t-function) è accessibile a livello di modulo: quando un modulo chiama [`t()`](/docs/react/reference/functions/t-function), le traduzioni sono già disponibili.

Questo funziona solo nelle app React lato client, perché il codice a livello di modulo viene rieseguito quando viene caricato nel browser. E poiché per aggiornare il contenuto tradotto dobbiamo rieseguire i moduli, per cambiare impostazione regionale è necessario un ricaricamento completo della pagina.

<Callout>
  **Sperimentale:** Questa funzionalità al momento richiede un&#39;applicazione React solo lato client.
</Callout>

## Variabili

[`t()`](/docs/react/reference/functions/t-function) supporta l&#39;interpolazione delle variabili, come [`msg()`](/docs/react/reference/functions/msg):

```tsx
import { t } from 'gt-react/browser';

t('Hello, {name}!', { name: 'John' });  // → "Hola, John!"
```

## Dove si colloca

[`t()`](/docs/react/reference/functions/t-function) è la scelta giusta quando hai bisogno di traduzioni al di fuori dell&#39;albero dei componenti React: file di costanti, funzioni di utilità, oggetti di configurazione, definizioni del router o qualsiasi elemento eseguito a livello di modulo nel browser.

Tieni presente che:

* **Questo non si integra ancora con il resto del sistema `gt-react`.** Devi eseguire la configurazione iniziale descritta sopra. È un approccio autonomo.
* **Solo lato client.** Per la traduzione lato server, dovresti usare hook basati sul contesto React come [`useGT`](/docs/react/reference/hooks/use-gt).

## Note di progettazione

[`t()`](/docs/react/reference/functions/t-function) è disponibile solo nel browser. Se viene chiamato sul server (dove `window` non è definito), genera un avviso e usa come fallback la stringa di origine. È intenzionale: per la traduzione lato server dovresti usare gli hook esistenti basati sul contesto React.

***

## Riferimento API

Consulta il [riferimento completo dell’API `t()`](/docs/react/reference/functions/t-function) per i parametri, i tipi restituiti e i dettagli di configurazione.

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.