# General Translation React SDKs (gt-react, gt-next): Tradurre con i dizionari
URL: https://generaltranslation.com/it/docs/react/guides/translating-with-dictionaries.mdx
---

title: Tradurre con i dizionari
description: Come tradurre le stringhe usando un dizionario centrale con l'hook useTranslations di General Translation in React, Next.js, TanStack Start e React Native.
related:
  links:
    - /docs/react/guides/translating-strings
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/handling-plurals-and-branches
    - /docs/react/guides/formatting-variables

---

Un dizionario raccoglie le stringhe traducibili in un unico posto, identificate da `id`, invece di definirle inline nei componenti. È adatto ai team che preferiscono testi centralizzati o che stanno migrando da una libreria i18n basata su chiavi. Nella maggior parte delle app, puoi invece usare [`<T>`](/docs/react/guides/translating-jsx) e [`useGT`](/docs/react/guides/translating-strings).

## Fornisci un dizionario [#provide]

Il modo in cui registri i dizionari per ciascuna impostazione regionale dipende dal framework.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    Passa i dizionari a `GTProvider` tramite la prop `dictionaries`, insieme ai parametri richiesti `locale` e `translations`.

    ```tsx
    <GTProvider locale={locale} translations={translations} dictionaries={dictionaries}>
      <App />
    </GTProvider>;
    ```
  </Tab>

  <Tab value="Next.js">
    In Next.js non devi passare i dizionari a `GTProvider`. Crea un file del dizionario nella radice del progetto e registralo con il plugin di configurazione, oppure lascia che venga rilevato automaticamente.

    ```json title="dictionary.json"
    {
      "home": { "title": "Welcome back" }
    }
    ```

    ```ts title="next.config.ts"
    import { withGTConfig } from 'gt-next/config';

    export default withGTConfig(nextConfig, { dictionary: './dictionary.json' });
    ```
  </Tab>

  <Tab value="TanStack Start">
    Passa i dizionari a `GTProvider` tramite la prop `dictionaries`, insieme ai parametri richiesti `locale` e `translations`.

    ```tsx
    <GTProvider locale={locale} translations={translations} dictionaries={dictionaries}>
      <App />
    </GTProvider>;
    ```
  </Tab>

  <Tab value="React Native">
    Passa i dizionari a `GTProvider` tramite la prop `dictionaries`, insieme all&#39;`locale` attiva.

    ```tsx
    <GTProvider locale={locale} dictionaries={dictionaries}>
      <App />
    </GTProvider>;
    ```
  </Tab>
</Tabs>

## Cerca le voci con `useTranslations` [#use-translations]

Chiama [`useTranslations`](/docs/react/reference/hooks/use-translations) per ottenere una funzione di lookup, quindi passa l&#39;id di una voce. Interpola i valori con un oggetto options.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { useTranslations } from 'gt-react';

    function Greeting() {
      const t = useTranslations();
      return <h1>{t('home.title')}</h1>;
    }
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx title="Componenti sincroni"
    import { useTranslations } from 'gt-next';

    function Greeting() {
      const t = useTranslations();
      return <h1>{t('home.title')}</h1>;
    }
    ```

    ```tsx title="Componenti async di App Router"
    import { getTranslations } from 'gt-next/server';

    async function Greeting() {
      const t = await getTranslations();
      return <h1>{t('home.title')}</h1>;
    }
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { useTranslations } from 'gt-tanstack-start';

    function Greeting() {
      const t = useTranslations();
      return <h1>{t('home.title')}</h1>;
    }
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { useTranslations } from 'gt-react-native';

    function Greeting() {
      const t = useTranslations();
      return <Text>{t('home.title')}</Text>;
    }
    ```
  </Tab>
</Tabs>

Passa un id radice per applicare un prefisso a tutte le ricerche. Funziona allo stesso modo in tutti i framework (`getTranslations('home')` sul server di Next.js):

```tsx
const t = useTranslations('home');
t('title'); // risolve home.title
```

*Nota: la ricerca di un id inesistente nel dizionario genera un errore, quindi mantieni sincronizzati gli id e le voci del dizionario.*

## Leggi oggetti annidati [#objects]

Usa `.obj(id)` per leggere un gruppo annidato di voci, ad esempio per iterare su un insieme di etichette.

```tsx
const t = useTranslations();
const labels = t.obj('nav.links');
```
## Next steps

- /docs/react/guides/translating-strings
- /docs/react/guides/translating-jsx
- /docs/react/guides/handling-plurals-and-branches
- /docs/react/guides/formatting-variables