# gt-next: General Translation Next.js SDK: Traduzione delle stringhe
URL: https://generaltranslation.com/it/docs/next/tutorials/translating-strings.mdx
---
title: Traduzione delle stringhe
description: Come tradurre le stringhe
---

## Panoramica

Questa guida è un tutorial passo passo su come tradurre le stringhe nella tua app Next.js usando
[`useGT`](/docs/next/api/strings/use-gt), [`getGT`](/docs/next/api/strings/get-gt) e [`tx`](/docs/next/api/strings/tx).

## Prerequisiti

Presupponiamo che tu abbia già installato `gt-next` nel tuo progetto e che abbia seguito, o stia seguendo, la [Guida rapida](/docs/next).

## Tradurre le stringhe

### Componenti del lato client

Per tutte le stringhe del lato client, usa [`useGT`](/docs/next/api/strings/use-gt).
Ricorda che `useGT` deve essere chiamato all&#39;interno di un componente figlio di [`<GTProvider>`](/docs/next/api/components/gtprovider).

```jsx title="src/components/MyComponent.jsx" copy
import { useGT } from 'gt-next';

export default function MyComponent() {
  const gt = useGT(); // [!code highlight]
  return (
    <div>
      <h1>{gt('This is a string that gets translated')}</h1> // [!code highlight]
    </div>
  );
}
```

### Componenti lato server

Per qualsiasi stringa sul lato server, usa [`getGT`](/docs/next/api/strings/get-gt).

```jsx title="src/pages/index.jsx" copy
import { getGT } from 'gt-next/server';

export default async function Home() {
  const gt = await getGT(); // [!code highlight]
  return (
    <div>
      <h1>{gt('This is a string that gets translated')}</h1> // [!code highlight]
    </div>
  );
}
```

<Callout>
  **Nota:**
  Durante lo sviluppo, se traduci contenuti a runtime, dovrai ricaricare la pagina per vedere la versione tradotta di una stringa con [`getGT`](/docs/next/api/strings/get-gt).
  **Questo non succede in produzione.**
</Callout>

### Aggiungere variabili

Le variabili sono valori che possono cambiare, ma non vengono tradotte.
Per aggiungere variabili alle tue stringhe, usa il seguente schema:

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

export default function MyComponent() {
  const gt = useGT();
  return (
    <div>
      <h1>{gt('Hello there, {username}', { variables: { username: 'Brian123' }})}</h1> // [!code highlight]
    </div>
  );
}
```

Funziona sia con [`useGT`](/docs/next/api/strings/use-gt) che con [`getGT`](/docs/next/api/strings/get-gt).


### Contenuto dinamico

Supponiamo che tu abbia una stringa che cambia.
Puoi usare la funzione [`tx`](/docs/next/api/strings/tx) per tradurre la stringa a runtime.

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

export default async function MyComponent({ username }) {
  const translation = await tx(`Hello, ${username}. How is your day?`); // [!code highlight]
  return (
    <div>
      <h1>{translation}</h1> // [!code highlight]
    </div>
  );
}
```

<Callout>
  **Nota:**
  La funzione [`tx`](/docs/next/api/strings/tx) è disponibile solo lato server e va usata solo quando necessario.
  La traduzione runtime spesso introduce un ritardo.
  Usa [`getGT`](/docs/next/api/strings/get-gt) o [`useGT`](/docs/next/api/strings/use-gt), quando possibile, per tradurre prima del deployment.
</Callout>

***


## Note

* Per tradurre le stringhe, usa [`useGT`](/docs/next/api/strings/use-gt), [`getGT`](/docs/next/api/strings/get-gt) e [`tx`](/docs/next/api/strings/tx).
* `useGT` e `getGT` traducono prima del deployment, mentre `tx` traduce a runtime. Usa `tx` con moderazione.
* Puoi aggiungere variabili alle stringhe usando il pattern `{ variables: { key: value } }`.

## Passaggi successivi

* Torna alla [Guida rapida](/docs/next) per completare la configurazione del progetto per la traduzione.
* Consulta il riferimento API di [`useGT`](/docs/next/api/strings/use-gt), [`getGT`](/docs/next/api/strings/get-gt) e [`tx`](/docs/next/api/strings/tx).