# General Translation React SDKs (gt-react, gt-next, gt-react-native): Configurazione di General Translation
URL: https://generaltranslation.com/it/docs/react/guides/configuring.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Come inizializzare General Translation, configurare le credenziali e distribuire le traduzioni con `<GTProvider>`.

Le applicazioni React server-rendered e ogni integrazione con framework richiedono una configurazione, oltre a un [`GTProvider`](/docs/react/reference/components/gt-provider) che renda disponibili le traduzioni ai tuoi componenti. Le SPA React si inizializzano direttamente con [`initializeGTSPA`](/docs/react/reference/config#initialize-spa); per questa configurazione, segui il [React SPA Quickstart](/docs/react/react-spa-quickstart).

*Nota: `gt-react`, `gt-tanstack-start` e `gt-react-native` non leggono automaticamente `gt.config.json` — importalo e passa i relativi campi alla chiamata di inizializzazione. In Next.js, il plugin [`withGTConfig`](/docs/react/nextjs/config) legge `gt.config.json` per te.*

## Inizializza la libreria [#initialize]

Configura General Translation una sola volta, prima del primo rendering.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    Chiama [`initializeGT`](/docs/react/reference/config#initialize) una volta in un modulo che viene caricato sia sul server sia sul client. Il framework risolve l&#39;impostazione regionale della richiesta e fornisce le traduzioni corrispondenti durante il rendering sul server.

    ```tsx title="src/routes/root.tsx"
    import { initializeGT } from 'gt-react';
    import gtConfig from '../../gt.config.json';

    const loadTranslations = (locale: string) =>
      import(`../_gt/${locale}.json`).then((m) => m.default);

    initializeGT({ ...gtConfig, loadTranslations });
    ```

    I callback [`loadTranslations`](/docs/react/reference/functions/load-translations) e [`loadDictionary`](/docs/react/reference/functions/load-dictionary), le credenziali e la configurazione dell&#39;impostazione regionale vanno tutti passati nella chiamata di inizializzazione, non in [`GTProvider`](/docs/react/reference/components/gt-provider).
  </Tab>

  <Tab value="Next.js">
    Next.js non prevede una chiamata di inizializzazione manuale. Aggiungi il plugin [`withGTConfig`](/docs/react/nextjs/config) a `next.config.ts`; legge `gt.config.json` e configura la traduzione in fase di build e al momento della richiesta.

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

    const nextConfig = {};

    export default withGTConfig(nextConfig, {
      // opzioni come `dictionary`, `loadTranslationsPath` e override dell'impostazione regionale
    });
    ```
  </Tab>

  <Tab value="TanStack Start">
    Chiama [`initializeGT`](/docs/react/reference/config#initialize) una volta all&#39;avvio del server e del client, passando anche la tua configurazione.

    ```tsx
    import { initializeGT } from 'gt-tanstack-start';
    import gtConfig from '../gt.config.json';

    const loadTranslations = (locale: string) =>
      import(`./_gt/${locale}.json`).then((m) => m.default);

    initializeGT({ ...gtConfig, loadTranslations });
    ```

    Registra [`gtMiddleware`](/docs/react/tanstack-start/reference/functions/gt-middleware), quindi usa [`getLocale`](/docs/react/tanstack-start/reference/functions/get-locale) di `gt-tanstack-start` all&#39;interno dell&#39;ambito della richiesta. Con [`localeRouting`](/docs/react/reference/config#locale-routing) abilitato, il middleware risolve l&#39;impostazione regionale dal prefisso del percorso prima del cookie e dell&#39;header `Accept-Language`.
  </Tab>

  <Tab value="React Native">
    Chiama [`initializeGT`](/docs/react/reference/config#initialize) una volta all&#39;avvio dell&#39;app, passando anche la tua configurazione.

    ```tsx
    import { initializeGT } from 'gt-react-native';
    import gtConfig from '../gt.config.json';

    const loadTranslations = (locale: string) =>
      import(`./_gt/${locale}.json`).then((m) => m.default);

    initializeGT({ ...gtConfig, loadTranslations });
    ```
  </Tab>
</Tabs>

## Aggiungi il provider [#provider]

Avvolgi la tua app in [`GTProvider`](/docs/react/reference/components/gt-provider#contracts) così i componenti possono leggere le traduzioni.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    Carica sul server le traduzioni dell&#39;impostazione regionale attiva, quindi passa entrambi i valori al provider. L&#39;API esatta del loader dipende dal framework che usi.

    ```tsx title="src/routes/root.tsx"
    import { GTProvider, getTranslationsSnapshot, parseLocale } from 'gt-react';

    export async function loadRoot(request: Request) {
      const locale = parseLocale(request);
      return {
        locale,
        translations: await getTranslationsSnapshot(locale),
      };
    }

    export function Root({ locale, translations, children }) {
      return (
        <GTProvider locale={locale} translations={translations}>
          {children}
        </GTProvider>
      );
    }
    ```

    Il provider accetta anche [`region`](/docs/react/reference/components/gt-provider#region) e [`enableI18n`](/docs/react/reference/components/gt-provider#enable-i18n) (il valore predefinito è `true`). Quando la traduzione è disabilitata oppure l&#39;impostazione regionale attiva coincide con l&#39;impostazione regionale predefinita, il contenuto viene renderizzato nella lingua sorgente.
  </Tab>

  <Tab value="Next.js">
    Avvolgi il tuo root layout in [`<GTProvider>`](/docs/react/reference/components/gt-provider#contracts). Legge l&#39;impostazione regionale della richiesta e le traduzioni dal plugin, quindi il provider App Router accetta solo `children`.

    ```tsx title="app/layout.tsx"
    import { GTProvider, useLocale } from 'gt-next';

    export default function RootLayout({ children }: { children: React.ReactNode }) {
      const locale = useLocale();
      return (
        <html lang={locale}>
          <body>
            <GTProvider>{children}</GTProvider>
          </body>
        </html>
      );
    }
    ```
  </Tab>

  <Tab value="TanStack Start">
    Passa l&#39;[`locale`](/docs/react/reference/components/gt-provider#locale) attiva e le relative [`translations`](/docs/react/reference/components/gt-provider#translations). Entrambe sono obbligatorie.

    ```tsx
    import { GTProvider, getTranslationsSnapshot } from 'gt-tanstack-start';

    const translations = await getTranslationsSnapshot(locale);

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

  <Tab value="React Native">
    Avvolgi la tua app in [`<GTProvider>`](/docs/react/reference/components/gt-provider#contracts). Carica automaticamente le traduzioni per l&#39;impostazione regionale attiva, quindi non accetta la prop `translations`; [`locale`](/docs/react/reference/components/gt-provider#locale) è facoltativa e, per impostazione predefinita, usa l&#39;impostazione regionale memorizzata o del dispositivo.

    ```tsx
    import { GTProvider } from 'gt-react-native';

    <GTProvider>
      <App />
    </GTProvider>;
    ```
  </Tab>
</Tabs>

<Callout type="info">
  **Modificato in v11 (React):** il provider `gt-react` non accetta più `config`, [`loadTranslations`](/docs/react/reference/functions/load-translations) o credenziali come props. Questa configurazione ora viene definita nella chiamata di inizializzazione; il provider riceve solo [`locale`](/docs/react/reference/components/gt-provider#locale) e [`translations`](/docs/react/reference/components/gt-provider#translations) già risolte.
</Callout>

Consulta il [riferimento della configurazione](/docs/react/reference/config) per tutte le opzioni del provider e dell&#39;inizializzazione.

## Aggiungi le credenziali [#credentials]

La distribuzione delle traduzioni e le funzionalità di sviluppo utilizzano un ID progetto e una chiave API, configurati tramite variabili d&#39;ambiente.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    Esponi l&#39;ID progetto e la chiave API di sviluppo seguendo la convenzione del tuo framework per le variabili d&#39;ambiente lato client, quindi passali a [`initializeGT`](/docs/react/reference/config#initialize). Non esporre mai una chiave API di produzione.
  </Tab>

  <Tab value="Next.js">
    Impostali nel tuo ambiente; il plugin li legge automaticamente. `GT_API_KEY` (la chiave di produzione) viene usata lato server e dalla CLI in CI. Usa il prefisso `NEXT_PUBLIC_` solo per i valori che devono arrivare al browser.

    ```bash title=".env.local"
    GT_PROJECT_ID="..."
    GT_DEV_API_KEY="gtx-dev-..."
    ```
  </Tab>

  <Tab value="TanStack Start">
    Impostali tramite le variabili d&#39;ambiente pubbliche del tuo bundler e passali alla chiamata di inizializzazione.

    ```bash title=".env (Vite)"
    VITE_GT_PROJECT_ID="..."
    VITE_GT_DEV_API_KEY="gtx-dev-..."
    ```
  </Tab>

  <Tab value="React Native">
    Impostali tramite le variabili d&#39;ambiente pubbliche del tuo bundler e passali alla chiamata di inizializzazione.

    ```bash title=".env (Expo)"
    EXPO_PUBLIC_GT_PROJECT_ID="..."
    EXPO_PUBLIC_GT_DEV_API_KEY="gtx-dev-..."
    ```
  </Tab>
</Tabs>

*Nota: esponi al client solo una chiave API di sviluppo. Le chiavi API di produzione sono usate dalla CLI in CI e non vengono mai inviate al client.*

## Scegli come vengono fornite le traduzioni [#delivery]

General Translation gestisce le traduzioni in una di queste modalità, in base alla tua configurazione. Il comportamento è lo stesso in tutti i framework:

* **File locali:** fornisci [`loadTranslations`](/docs/react/reference/functions/load-translations) per importare il JSON incluso nel bundle. Vedi [Archiviare le traduzioni localmente](/docs/react/guides/storing-translations).
* **CDN di General Translation:** fornisci un [`projectId`](/docs/react/reference/config#project-id) (senza un loader personalizzato) per recuperare le traduzioni dalla CDN di GT a runtime.
* **Endpoint personalizzato:** imposta un [`cacheUrl`](/docs/react/reference/config#cache-url) personalizzato per caricarle dal tuo host.

In sviluppo, se fornisci un [`projectId`](/docs/react/reference/config#project-id) e una chiave API di sviluppo, abiliti la traduzione su richiesta e l&#39;hot reload, così le nuove stringhe vengono tradotte mentre lavori. In produzione, le traduzioni provengono dai file pre-generati o dalla CDN.

## Next steps

- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/managing-locales
- /docs/react/guides/storing-translations

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.