# gt-next: General Translation Next.js SDK: Tx
URL: https://generaltranslation.com/it/docs/next/api/components/tx.mdx
---
title: Tx
description: Guida di riferimento API per il componente Tx
---

## Panoramica

Il componente `<Tx>` esegue la traduzione del contenuto JSX a runtime.

```jsx
{/* [!code highlight] */}
<Tx>
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</Tx> // [!code highlight]
```

Il componente `<Tx>` supporta la traduzione sia di testo semplice sia di strutture JSX complesse.
Inoltre, offre funzionalità per gestire variabili, plurali e traduzioni specifiche per contesto.
`<Tx>` è disponibile solo lato server.

<Callout>
  **Traduzione runtime:**
  le traduzioni di `<Tx>` avvengono a runtime.
  Ciò significa che la traduzione viene eseguita dinamicamente.
</Callout>

***


## Guida di riferimento

### Props

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

### Descrizioni

| Prop       | Descrizione                                                                                                                                                                                                 |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | Il contenuto da tradurre. Può includere testo semplice o strutture JSX.                                                                                                                                     |
| `context`  | Contesto aggiuntivo per perfezionare la traduzione. Utile per risolvere frasi ambigue.                                                                                                                      |
| `locale`   | Un&#39;impostazione regionale facoltativa da usare per la traduzione. Per impostazione predefinita, verrà usata l&#39;impostazione regionale del browser più preferita tra quelle supportate dalla tua app. |
| `maxChars` | Un numero massimo facoltativo di caratteri per la traduzione. La libreria applica rigorosamente questo limite.                                                                                              |

***

## Comportamento

`<Tx>` traduce JSX a runtime.
Questo significa che le traduzioni vengono eseguite in tempo reale, quindi puoi tradurre contenuti noti solo a runtime.
Lo svantaggio è che bisogna attendere il caricamento di una traduzione on-demand, che è significativamente più lento.

Durante il caricamento, `<Tx>` 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, `<Tx>` restituirà il contenuto originale.

Il nostro consiglio è di tradurre tutto il possibile nella fase di build usando [`<T>`](/docs/next/api/components/t), [`getGT`](/docs/next/api/strings/use-gt) o [`useGT`](/docs/next/api/strings/use-gt),
e di usare le traduzioni on-demand, come `<Tx>` e [`tx`](/docs/next/api/strings/tx), solo quando necessario.

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

***

## Esempi

### Utilizzo di base

Il componente `<Tx>` traduce i suoi contenuti figli a runtime.

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

export default function Greeting() {
    return (
        {/* [!code highlight] */}
        <Tx>
            Hello, world!
        </Tx> // [!code highlight]
    );
}
```

### Con variabili

Puoi usare il componente `<Var>` per contrassegnare il contenuto figlio come variabili.
In questo modo puoi indicare contenuti che non devono essere tradotti.

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

export default function DynamicGreeting(user) {
    return (
        <Tx>
            {/* [!code highlight] */}
            Hello, <Var>{user.name}</Var>
        </Tx>
    );
}
```

### Con i plurali

Il componente `<T>` supporta anche la pluralizzazione tramite il componente `<Plural>`.

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

export default function ItemCount({ count }) {
    return (
        <Tx>
            <Plural n={count}  // [!code highlight] 
                one={<>You have an item.</>}  // [!code highlight] 
                other={<>You have items.</>}  // [!code highlight] 
            // [!code highlight]
            />  
        </Tx>
    );
}
```

### Limitazioni

La funzione `<Tx>` traduce solo gli elementi discendenti.

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

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

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

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

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

            <InvalidTranslation /> // non verrà tradotto
        </Tx>
    );
}
```

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

***

## Note

* Il componente `<Tx>` è progettato per tradurre i contenuti della tua applicazione a runtime.
* Usa il componente `<Tx>` per tradurre testo semplice o strutture JSX, incluse variabili e forme plurali.

## Passaggi successivi

* Per le traduzioni in fase di build, consulta il componente [`<T>`](/docs/next/api/components/t).
* Per funzionalità più avanzate, consulta la [guida 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).