# General Translation React SDKs (gt-react, gt-next): Configuración de General Translation
URL: https://generaltranslation.com/es/docs/react/guides/configuring.mdx
---

title: Configuración de General Translation
description: "Cómo configurar General Translation en React: esta guía abarca la inicialización, el proveedor, las credenciales y la entrega de traducciones en React, Next.js, TanStack Start y 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 con renderizado en el servidor y cada integración con frameworks necesitan configuración, además de un `GTProvider` que ponga las traducciones a disposición de tus componentes. Las SPA de React se inicializan directamente con `initializeGTSPA`; sigue la [SPA Quickstart de React](/docs/react/react-spa-quickstart) para esa configuración.

*Nota: `gt-react`, `gt-tanstack-start` y `gt-react-native` no leen `gt.config.json` automáticamente; impórtalo y pasa sus campos a la llamada de inicialización. En Next.js, el plugin `withGTConfig` lee `gt.config.json` por ti.*

## Inicializa la biblioteca [#initialize]

Configura General Translation una sola vez, antes del primer renderizado.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    Llama a [`initializeGT`](/docs/react/reference/config#initialize) una vez en un módulo que se cargue tanto en el servidor como en el cliente. Tu framework determina la configuración regional de la solicitud y proporciona las traducciones correspondientes durante el renderizado en el servidor.

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

    Los callbacks [`loadTranslations`](/docs/react/reference/functions/load-translations) y [`loadDictionary`](/docs/react/reference/functions/load-dictionary), las credenciales y la configuración regional van en la llamada de inicialización, no en `GTProvider`.
  </Tab>

  <Tab value="Next.js">
    Next.js no requiere una llamada de inicialización manual. Agrega el plugin `withGTConfig` a `next.config.ts`; lee `gt.config.json` y conecta la traducción en tiempo de compilación y de solicitud.

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

    const nextConfig = {};

    export default withGTConfig(nextConfig, {
      // opciones como `dictionary`, `loadTranslationsPath` y anulaciones de configuración regional
    });
    ```
  </Tab>

  <Tab value="TanStack Start">
    Llama a `initializeGT` una vez durante el arranque del servidor y del cliente, expandiendo tu configuración.

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

    Usa `parseLocale` de `gt-tanstack-start` en una función del servidor para determinar la configuración regional de la solicitud a partir de las cookies y la cabecera `accept-language`.
  </Tab>

  <Tab value="React Native">
    Llama a `initializeGT` una vez al iniciar la aplicación, expandiendo tu configuración.

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

## Agrega el proveedor [#provider]

Envuelve tu app en `GTProvider` para que los componentes puedan leer las traducciones.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    Carga en el servidor las traducciones de la configuración regional activa y luego pasa ambos valores al proveedor. La API exacta del loader depende de tu 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>
      );
    }
    ```

    El proveedor también acepta `region` y `enableI18n` (el valor predeterminado es `true`). Cuando `enableI18n` es `false` o la configuración regional activa coincide con la configuración regional predeterminada, el contenido se renderiza en el idioma de origen.
  </Tab>

  <Tab value="Next.js">
    Envuelve tu layout raíz con [`<GTProvider>`](/docs/react/reference/components/gt-provider). Lee la configuración regional de la solicitud y las traducciones desde el plugin, así que no necesita las props `locale` ni `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">
    Pasa la `locale` activa y sus `translations`. Ambas son obligatorias.

    ```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">
    Envuelve tu app en `<GTProvider>`. Carga por sí solo las traducciones de la configuración regional activa, así que `translations` no es obligatoria; `locale` es opcional y, de forma predeterminada, usa la configuración regional del dispositivo.

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

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

<Callout type="info">
  **Cambió en v11 (React):** el proveedor de `gt-react` ya no recibe `config`, `loadTranslations` ni credenciales como props. Esa configuración ahora se define en la llamada de inicialización; el proveedor solo recibe la `locale` y las `translations` ya resueltas.
</Callout>

Consulta la [referencia de Configuración](/docs/react/reference/config) para ver todas las opciones del proveedor y de inicialización.

## Agregar credenciales [#credentials]

La entrega de traducciones y las funciones de desarrollo usan un ID del proyecto y una clave de API, configurados mediante variables de entorno.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    Expón el ID del proyecto y la clave de API de desarrollo siguiendo la convención de variables de entorno del cliente de tu framework, y luego pásalos a `initializeGT`. Nunca expongas una clave de API de producción.
  </Tab>

  <Tab value="Next.js">
    Configúralos en tu entorno; el plugin los lee automáticamente. `GT_API_KEY` (la clave de producción) se usa en el servidor y la CLI en CI. Usa el prefijo `NEXT_PUBLIC_` solo para los valores que deban llegar al navegador.

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

  <Tab value="TanStack Start">
    Configúralos mediante las variables de entorno públicas de tu empaquetador y pásalos a la llamada de inicialización.

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

  <Tab value="React Native">
    Configúralos mediante las variables de entorno públicas de tu empaquetador y pásalos a la llamada de inicialización.

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

*Nota: Expón al cliente únicamente una clave de API de desarrollo. Las claves de API de producción las usa la CLI en CI; nunca se envían al cliente.*

## Elige cómo se entregan las traducciones [#delivery]

General Translation resuelve las traducciones en uno de estos modos, según tu configuración. Esto funciona igual en todos los frameworks:

* **Archivos locales:** proporciona `loadTranslations` para importar archivos JSON incluidos en el bundle. Consulta [Almacenar traducciones localmente](/docs/react/guides/storing-translations).
* **CDN de General Translation:** proporciona un `projectId` (sin un loader personalizado) para cargar traducciones desde la CDN de GT en runtime.
* **Endpoint personalizado:** configura un `cacheUrl` personalizado para cargar desde tu propio servidor.

Durante el desarrollo, proporcionar un `projectId` y una clave de API de desarrollo habilita la traducción on-demand y el hot reload, para que las nuevas cadenas se traduzcan mientras trabajas. En producción, las traducciones provienen de tus archivos pre-generados o de la CDN.
## Next steps

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