# General Translation React SDKs (gt-react, gt-next, gt-react-native): Configurer General Translation
URL: https://generaltranslation.com/fr/docs/react/guides/configuring.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Comment initialiser General Translation, configurer les identifiants et fournir les traductions avec `<GTProvider>`.

React avec rendu côté serveur, ainsi que chaque intégration à un framework, nécessitent une configuration et un [`GTProvider`](/docs/react/reference/components/gt-provider) qui met les traductions à disposition de vos composants. Les SPA React s’initialisent directement avec [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) ; 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`](/docs/react/nextjs/config) 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 identifiants et la configuration du paramètre régional se définissent dans l’appel d’initialisation — pas dans [`GTProvider`](/docs/react/reference/components/gt-provider).
  </Tab>

  <Tab value="Next.js">
    Next.js n’a pas d’appel d’initialisation manuel. Ajoutez le plugin [`withGTConfig`](/docs/react/nextjs/config) à `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`](/docs/react/reference/config#initialize) 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 });
    ```

    Enregistrez [`gtMiddleware`](/docs/react/tanstack-start/reference/functions/gt-middleware), puis utilisez [`getLocale`](/docs/react/tanstack-start/reference/functions/get-locale) depuis `gt-tanstack-start` dans le niveau de la requête. Lorsque [`localeRouting`](/docs/react/reference/config#locale-routing) est activé, le middleware résout le paramètre régional à partir du préfixe du chemin avant le cookie et l’en-tête `Accept-Language`.
  </Tab>

  <Tab value="React Native">
    Appelez [`initializeGT`](/docs/react/reference/config#initialize) 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`](/docs/react/reference/components/gt-provider#contracts) 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`](/docs/react/reference/components/gt-provider#region) et [`enableI18n`](/docs/react/reference/components/gt-provider#enable-i18n) (avec `true` par défaut). Lorsque la traduction est désactivée 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#contracts). Il récupère le paramètre régional de la requête et les traductions depuis le plugin, donc le provider App Router accepte uniquement `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">
    Transmettez le [`locale`](/docs/react/reference/components/gt-provider#locale) actif ainsi que les [`translations`](/docs/react/reference/components/gt-provider#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>`](/docs/react/reference/components/gt-provider#contracts). Il charge lui-même les traductions du paramètre régional actif, donc il n’accepte pas de prop `translations` ; [`locale`](/docs/react/reference/components/gt-provider#locale) est facultatif et utilise par défaut le paramètre régional enregistré ou celui de l’appareil.

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

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

<Callout type="info">
  **Modifié dans la v11 (React) :** le provider `gt-react` n’accepte plus `config`, [`loadTranslations`](/docs/react/reference/functions/load-translations) ni d’identifiants comme props. Cette configuration se fait désormais dans l’appel d’initialisation ; le provider reçoit uniquement le [`locale`](/docs/react/reference/components/gt-provider#locale) et les [`translations`](/docs/react/reference/components/gt-provider#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`](/docs/react/reference/config#initialize). 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`](/docs/react/reference/functions/load-translations) 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`](/docs/react/reference/config#project-id) (sans loader personnalisé) pour récupérer les traductions depuis le CDN de GT à l’exécution.
* **Endpoint personnalisé :** définissez un [`cacheUrl`](/docs/react/reference/config#cache-url) personnalisé pour charger les traductions depuis votre propre hôte.

En développement, fournir un [`projectId`](/docs/react/reference/config#project-id) 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

## Sitemap

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