# General Translation React SDKs (gt-react, gt-next): Configurer General Translation
URL: https://generaltranslation.com/fr/docs/react/guides/configuring.mdx
---
title: Configurer General Translation
description: "Comment configurer General Translation dans React : ce guide couvre l’initialisation, le provider, les identifiants d’accès et la livraison des traductions dans React, Next.js, TanStack Start et React Native."
related:
  links:
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/managing-locales
    - /docs/react/guides/storing-translations
---

React avec rendu côté serveur, ainsi que chaque intégration à un framework, nécessitent une configuration et un `GTProvider` qui met les traductions à disposition de vos composants. Les SPA React s’initialisent directement avec `initializeGTSPA` ; suivez le [React SPA Quickstart](/docs/react/react-spa-quickstart) pour cette configuration.

*Remarque : `gt-react`, `gt-tanstack-start` et `gt-react-native` ne lisent pas automatiquement `gt.config.json` — importez-le et transmettez ses champs à l’appel d’initialisation. Dans Next.js, le plugin `withGTConfig` lit `gt.config.json` pour vous.*

## Initialiser la bibliothèque [#initialize]

Configurez General Translation une seule fois, avant le premier rendu.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    Appelez [`initializeGT`](/docs/react/reference/config#initialize) une seule fois dans un module chargé à la fois côté serveur et côté client. Votre framework résout le paramètre régional de la requête et fournit les traductions correspondantes lors du rendu côté serveur.

    ```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 });
    ```

    Les callbacks [`loadTranslations`](/docs/react/reference/functions/load-translations) et [`loadDictionary`](/docs/react/reference/functions/load-dictionary), les informations d’identification et la configuration du paramètre régional se définissent dans l’appel d’initialisation — pas dans `GTProvider`.
  </Tab>

  <Tab value="Next.js">
    Next.js n’a pas d’appel d’initialisation manuel. Ajoutez le plugin `withGTConfig` à `next.config.ts` ; il lit `gt.config.json` et configure la traduction au moment du build et à l’exécution des requêtes.

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

    const nextConfig = {};

    export default withGTConfig(nextConfig, {
      // options telles que `dictionary`, `loadTranslationsPath` et les remplacements de paramètres régionaux
    });
    ```
  </Tab>

  <Tab value="TanStack Start">
    Appelez `initializeGT` une seule fois au démarrage du serveur et du client, en y injectant votre configuration.

    ```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 });
    ```

    Utilisez `parseLocale` depuis `gt-tanstack-start` dans une fonction serveur pour résoudre le paramètre régional de la requête à partir des cookies et de l’en-tête `accept-language`.
  </Tab>

  <Tab value="React Native">
    Appelez `initializeGT` une seule fois au démarrage de l’application, en y injectant votre configuration.

    ```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>

## Ajouter le provider [#provider]

Encapsulez votre application dans `GTProvider` pour que les composants puissent accéder aux traductions.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    Chargez les traductions du paramètre régional actif sur le serveur, puis transmettez ces deux valeurs au provider. L’API exacte du loader dépend de votre framework.

    ```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>
      );
    }
    ```

    Le provider accepte aussi `region` et `enableI18n` (avec `true` par défaut). Lorsque `enableI18n` vaut `false` ou que le paramètre régional actif est le même que le paramètre régional par défaut, le contenu s’affiche dans la langue source.
  </Tab>

  <Tab value="Next.js">
    Encapsulez votre root layout dans [`<GTProvider>`](/docs/react/reference/components/gt-provider). Il récupère le paramètre régional de la requête et les traductions depuis le plugin, donc il n’a pas besoin des props `locale` ou `translations`.

    ```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">
    Transmettez le `locale` actif ainsi que les `translations` correspondantes. Les deux sont obligatoires.

    ```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">
    Encapsulez votre application dans `<GTProvider>`. Il charge lui-même les traductions du paramètre régional actif, donc `translations` n’est pas requis ; `locale` est facultatif et utilise par défaut le paramètre régional de l’appareil.

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

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

<Callout type="info">
  **Modifié dans la v11 (React) :** le provider `gt-react` n’accepte plus `config`, `loadTranslations` ni d’identifiants comme props. Cette configuration se fait désormais dans l’appel d’initialisation ; le provider reçoit uniquement le `locale` et les `translations` résolus.
</Callout>

Consultez la [référence de configuration](/docs/react/reference/config) pour connaître toutes les options du provider et de l’initialisation.

## Ajouter les identifiants [#credentials]

La livraison des traductions et les fonctionnalités de développement utilisent un ID de projet et une clé API, définis à l’aide de variables d’environnement.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    Exposez l’ID de projet et la clé API de développement selon la convention de votre framework pour les variables d’environnement côté client, puis transmettez-les à `initializeGT`. N’exposez jamais une clé API de production.
  </Tab>

  <Tab value="Next.js">
    Définissez-les dans votre environnement ; le plugin les lit automatiquement. `GT_API_KEY` (la clé de production) est utilisée côté serveur et par la CLI en CI. Utilisez le préfixe `NEXT_PUBLIC_` uniquement pour les valeurs qui doivent être accessibles dans le navigateur.

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

  <Tab value="TanStack Start">
    Définissez-les via les variables d’environnement publiques de votre bundler, puis transmettez-les à l’appel d’initialisation.

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

  <Tab value="React Native">
    Définissez-les via les variables d’environnement publiques de votre bundler, puis transmettez-les à l’appel d’initialisation.

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

*Remarque : n’exposez au client qu’une clé API de développement. Les clés API de production sont utilisées par la CLI en CI et ne sont jamais envoyées au client.*

## Choisissez comment les traductions sont fournies [#delivery]

General Translation fournit les traductions selon l’un de ces modes, en fonction de votre configuration. Le fonctionnement est le même dans tous les frameworks :

* **Fichiers locaux :** fournissez `loadTranslations` pour importer du JSON inclus dans le bundle. Voir [Stocker les traductions localement](/docs/react/guides/storing-translations).
* **CDN de General Translation :** fournissez un `projectId` (sans loader personnalisé) pour récupérer les traductions depuis le CDN de GT à l’exécution.
* **Endpoint personnalisé :** définissez un `cacheUrl` personnalisé pour charger les traductions depuis votre propre hôte.

En développement, fournir un `projectId` et une clé API de développement active la traduction à la demande et le hot reload, afin que les nouvelles chaînes soient traduites au fur et à mesure de votre travail. En production, les traductions proviennent de vos fichiers pré-générés ou du CDN.
## Next steps

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