# gt-next: General Translation Next.js SDK: T
URL: https://generaltranslation.com/it/docs/next/api/components/t.mdx
---
title: T
description: Riferimento API del componente T
---

## Panoramica

Il componente `<T>` è il metodo principale per la traduzione in `gt-next`.

```jsx
<T>
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</T>
```

Il componente `<T>` supporta la traduzione sia di testo semplice sia di strutture JSX complesse.
Inoltre, offre funzionalità per gestire variabili, plurali e traduzioni specifiche per il contesto.

<Callout>
  **Traduzione in fase di build:**
  Le traduzioni di `<T>` vengono eseguite in fase di build.
  Questo significa che la traduzione avviene prima del deployment, riducendo la latenza.
  Assicurati di seguire la [guida al deployment disponibile qui](/docs/next/tutorials/quickdeploy).
</Callout>

***


## Riferimento

### Proprietà

<TypeTable
  type={{
  "children": {
      type: 'any',
      optional: false,
  },
  "id?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "context?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Descrizioni

| Prop       | Descrizione                                                                                                                                       |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | Il contenuto da tradurre. Può includere testo semplice o strutture JSX.                                                                           |
| `id`       | Un identificatore univoco facoltativo per la stringa di traduzione. Se non viene fornito, ne viene generato uno automaticamente in fase di build. |
| `context`  | Contesto aggiuntivo per affinare la traduzione. Utile per risolvere espressioni ambigue.                                                          |

### Restituisce

`React.JSX.Element|undefined` che contiene la traduzione visualizzata o il contenuto di fallback in base alla configurazione fornita.

***

## Comportamento

### Produzione

Durante il processo di CD, qualsiasi elemento figlio all&#39;interno di un `<T>` verrà tradotto prima del deployment della tua applicazione.
Questo garantisce tempi di caricamento rapidi per tutte le impostazioni regionali, ma può tradurre solo i contenuti noti nella fase di build.

Una volta generate, le traduzioni vengono (1) memorizzate nella CDN oppure (2) memorizzate nell&#39;output di build della tua app, in base alla tua configurazione.
Da lì, il contenuto tradotto viene servito ai tuoi utenti.
Se una traduzione non viene trovata, verrà usato il contenuto originale come fallback.

Assicurati di seguire la [guida al deployment disponibile qui](/docs/next/tutorials/quickdeploy).

### Sviluppo

Durante lo sviluppo, la funzione `<T>` tradurrà i contenuti su richiesta.
Questo è utile per fare prototipi e vedere come apparirà la tua app in lingue diverse.
Ricorda di aggiungere una chiave API Dev al tuo ambiente per abilitare questo comportamento.

Durante il caricamento, `<T>` restituirà undefined, a meno che le lingue non siano simili (en-US vs en-GB), anche se questo comportamento può essere personalizzato con le impostazioni di rendering.
Se si verifica un errore, `<T>` restituirà il contenuto originale.

Noterai un ritardo durante la traduzione su richiesta in fase di sviluppo.
Questo ritardo non si verificherà nelle build di produzione, a meno che il contenuto non venga tradotto esplicitamente su richiesta,
cioè usando [`<Tx>`](/docs/next/api/components/tx) o [`tx`](/docs/next/api/strings/tx).

***

## Esempi

### Utilizzo di base

`<T>` traduce i relativi elementi figlio.

```jsx title="SimpleTranslation.jsx" copy
import { T } from 'gt-next';

export default function Greeting() {
    return (
        <T>
            Hello, world!
        </T>
    );
}
```


### Con variabili

Puoi usare il componente `<Var>` per contrassegnare gli elementi figli come variabili.
In questo modo puoi indicare i contenuti che non devono essere tradotti.
Di solito, i componenti `<Var>` racchiudono contenuti dinamici.

```jsx title="DynamicGreeting.jsx" copy
import { T, Var } from 'gt-next';

export default function DynamicGreeting(user) {
    return (
        <T>
            Hello, <Var>{user.name}</Var>!
        </T>
    );
}
```


### Con i plurali

Il componente `<T>` supporta anche la gestione del plurale tramite il componente `<Plural>`.

```jsx title="ItemCount.jsx" copy
import { T, Plural } from 'gt-next';

export default function ItemCount({ count }) {
    return (
        <T>
            <Plural n={count} 
                one={<>You have an item.</>} 
                other={<>You have items.</>} 
            />
        </T>
    );
}
```


### Limitazioni

Il componente `<T>` non traduce i contenuti dinamici.

```jsx title="DynamicContent.jsx" copy
import { T } from 'gt-next';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} {/* genererà un errore */}
        </T>
    );
}
```

La funzione `<T>` traduce i propri elementi figli.

```jsx title="Example.jsx" copy
import { T } from 'gt-next';

const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);

const InvalidTranslation = ({ children }) => (<div><b>No translation</b></div>);

export default function Example() {
    return (
        <T>
            { /* [!code highlight] */}
            <div><b>This is valid!</b></div> {/* verrà tradotto */}

            
            <ValidTranslation>
            { /* [!code highlight] */}
                Hello, world!  {/* verrà tradotto */}
            </ValidTranslation> 

            <InvalidTranslation /> {/* non verrà tradotto */}
        </T>
    );
}
```

<Callout>
  **Nota:** Come regola generale, viene tradotto qualsiasi contenuto che si trovi *letteralmente* tra i due `<T>` nel file.
  Puoi sempre aggiungere un altro `<T>` per tradurre il contenuto che non viene tradotto, anche se non è consigliabile annidare i componenti `<T>`.
</Callout>

***


## Note

* Il componente `<T>` è progettato per tradurre i contenuti dell&#39;applicazione. È il metodo principale per la localizzazione in `gt-next`.
* Usa il componente `<T>` per tradurre testo semplice o strutture JSX, incluse variabili e forme plurali.
* Se usi il componente `<T>` lato client, assicurati che sia racchiuso in un [`<GTProvider>`](/docs/next/api/components/gtprovider) per accedere al contesto di traduzione.

## Passaggi successivi

* Per le traduzioni su richiesta, consulta il componente [`<Tx>`](/docs/next/api/components/tx).
* Per funzionalità più avanzate, consulta la [documentazione di riferimento di `<T>`](/docs/next/guides/t).
* Per tradurre le stringhe, consulta [`tx`](/docs/next/api/strings/tx), [`getGT`](/docs/next/api/strings/get-gt) e [`useGT`](/docs/next/api/strings/use-gt).