# gt-next: General Translation Next.js SDK: useTranslations
URL: https://generaltranslation.com/it/docs/next/api/dictionary/use-translations.mdx
---
title: useTranslations
description: Riferimento API dell'hook useTranslations
---

## Panoramica

`useTranslations` viene utilizzato per accedere alle traduzioni delle stringhe nel [dizionario di traduzione](/docs/next/guides/dictionaries).

Deve essere utilizzato all&#39;interno di un componente avvolto da un [`<GTProvider>`](/docs/next/api/components/gtprovider).

```jsx
const t = useTranslations(); // Ottieni la funzione di traduzione
t('greeting.hello'); // passa l'id per ottenere una traduzione
```

Per i componenti asincroni, vedi [`getTranslations`](/docs/next/api/dictionary/get-translations).

<Callout>
  `getTranslations` e `useTranslations` usano un [dizionario](/docs/next/guides/dictionaries) per archiviare tutti i contenuti da tradurre.
  Questo è diverso dall&#39;usare il [componente `<T>`](/docs/next/guides/t) per la traduzione.
  Se ti interessa usare solo i componenti `<T>` per la traduzione, questo documento non è pertinente.
</Callout>


## Riferimento

### Parametri

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

### Descrizione

| Prop | Descrizione                                                                                                                         |
| ---- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `id` | Un prefisso facoltativo da anteporre a tutte le chiavi di traduzione. È utile quando si lavora con valori di dizionario nidificati. |

### Restituisce

Una funzione di traduzione `d` che, dato un ID, restituisce la versione tradotta della voce corrispondente

```jsx
(id: string, options?: DictionaryTranslationOptions) => string
```

| Nome       | Tipo                                                                                  | Descrizione                                                       |
| ---------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| `id`       | `string`                                                                              | L&#39;ID della voce da tradurre                                   |
| `options?` | [`DictionaryTranslationOptions`](/docs/next/api/types/dictionary-translation-options) | Opzioni di traduzione per personalizzare il comportamento di `d`. |

***

## Esempi

### Utilizzo di base del dizionario

Ogni voce del dizionario viene tradotta.

```jsx title="dictionary.jsx" copy
const dictionary = {
  greeting: "Hello, Bob", // [!code highlight]
};
export default dictionary;
```

Quando vogliamo accedere a queste voci (lato client), chiamiamo `useTranslations`.
Questo restituisce una funzione che accetta la chiave di una traduzione del dizionario.

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

export default async function TranslateGreeting() {
  const t = useTranslations(); // [!code highlight]
  return (
    <p>
      {t('greeting')} // Hello, Alice // [!code highlight]
    </p>
  );
}
```

### Uso delle variabili [#variables]

Per passare dei valori, devi (1) assegnare un identificatore e (2) fare riferimento a quell&#39;identificatore quando chiami la funzione `d`.

In questo esempio usiamo `{}` per passare variabili alle traduzioni.
Nel dizionario assegniamo l&#39;identificatore `{userName}`.

```jsx title="dictionary.jsx" copy
// [!code word:userName]
const dictionary = {
  greeting: "Ciao, {userName}!", // [!code highlight]
};
export default dictionary;
```

```jsx title="src/server/TranslateGreeting.jsx" copy
// [!code word:userName]
import { useTranslations } from 'gt-next';

export default async function TranslateGreeting() {
  const t = useTranslations();
  
  // Ciao Alice!
  const greetingAlice = t('greeting', { userName: "Alice" }); // [!code highlight]

  return (
    <p>
      {greetingAlice}
    </p>
  );
}
```


### Uso dei prefissi

Puoi usare i prefissi per tradurre solo una parte del dizionario.

```jsx title="dictionary.jsx" copy
const dictionary = {
  prefix1: { // [!code highlight]
    prefix2: { // [!code highlight]
      greeting: "Hello, Bob",
    }
  }
};
export default dictionary;
```

Poiché abbiamo aggiunto il valore `'prefix1.prefix2'` all&#39;hook `useTranslations`, tutte le chiavi hanno il prefisso `prefix1.prefix2`:

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

export default function UserDetails() {
  const t = useTranslations('prefix1.prefix2'); // [!code highlight]
  return (
    <div>
      <p>{t('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
    </div>
  );
}
```

***


## Note

* La funzione `useTranslations` ti consente di accedere alle traduzioni del dizionario sul lato client.
* L&#39;hook `useTranslations` può essere utilizzato solo all&#39;interno di un componente racchiuso in un [componente `<GTProvider>`](/docs/next/api/components/gtprovider).

## Passaggi successivi

* Per le traduzioni lato server, consulta [`getTranslations`](/docs/next/api/dictionary/get-translations).
* Per saperne di più sull&#39;uso dei dizionari, consulta il [riferimento sui dizionari](/docs/next/guides/dictionaries).