# General Translation React SDKs (gt-react, gt-next, gt-react-native): Traducir con diccionarios
URL: https://generaltranslation.com/es/docs/react/guides/translating-with-dictionaries.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Cómo traducir cadenas desde un diccionario central con el hook useTranslations de General Translation.

Un diccionario reúne tus cadenas traducibles en un solo lugar, identificadas por id, en lugar de incluirlas inline en los componentes. Esto resulta útil para equipos que prefieren centralizar los textos o que están migrando desde una biblioteca de i18n basada en claves. En su lugar, la mayoría de las apps pueden usar [`<T>`](/docs/react/guides/translating-jsx) y [`useGT`](/docs/react/guides/translating-strings) en su lugar.

## Proporciona un diccionario [#provide]

La forma de registrar tus diccionarios para cada configuración regional depende del framework.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    Pasa tus diccionarios a [`GTProvider`](/docs/react/reference/components/gt-provider) mediante la prop [`dictionaries`](/docs/react/reference/components/gt-provider#dictionaries), junto con [`locale`](/docs/react/reference/components/gt-provider#locale) y [`translations`](/docs/react/reference/components/gt-provider#translations), que son obligatorias.

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

  <Tab value="Next.js">
    En Next.js no pasas [`dictionaries`](/docs/react/reference/components/gt-provider#dictionaries) a [`GTProvider`](/docs/react/reference/components/gt-provider). Crea un archivo de diccionario en la raíz del proyecto y regístralo con el plugin de configuración, o deja que se detecte automáticamente.

    ```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">
    Pasa tus diccionarios a [`GTProvider`](/docs/react/reference/components/gt-provider) mediante la prop [`dictionaries`](/docs/react/reference/components/gt-provider#dictionaries), junto con [`locale`](/docs/react/reference/components/gt-provider#locale) y [`translations`](/docs/react/reference/components/gt-provider#translations), que son obligatorias.

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

  <Tab value="React Native">
    Pasa tus diccionarios a [`GTProvider`](/docs/react/reference/components/gt-provider) mediante la prop [`dictionaries`](/docs/react/reference/components/gt-provider#dictionaries), junto con la [`locale`](/docs/react/reference/components/gt-provider#locale) activa.

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

## Busca entradas con `useTranslations` [#use-translations]

Llama a [`useTranslations`](/docs/react/reference/hooks/use-translations) para obtener una función de búsqueda y luego pásale el id de una entrada. Interpola valores con un objeto de opciones.

<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="Componentes síncronos"
    import { useTranslations } from 'gt-next';

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

    ```tsx title="Componentes asíncronos de 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 title="Componentes"
    import { useTranslations } from 'gt-tanstack-start';

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

    ```ts title="Funciones del servidor"
    import { createServerFn } from '@tanstack/react-start';
    import { getTranslations } from 'gt-tanstack-start';

    export const loadGreeting = createServerFn({ method: 'GET' }).handler(
      async () => {
        const t = await getTranslations();
        return t('home.title');
      }
    );
    ```

    Registra [`gtMiddleware`](/docs/react/tanstack-start/reference/functions/gt-middleware) antes de usar el helper del servidor.
  </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>

Pasa [`rootId`](/docs/react/reference/hooks/use-translations#root-id) para delimitar todas las búsquedas bajo un prefijo. Esto funciona igual en todos los frameworks (`getTranslations('home')` en el código del servidor de Next.js y TanStack Start):

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

*Nota: Consultar un id que no existe en el diccionario genera una excepción, así que mantén sincronizados los ids y las entradas del diccionario.*

## Leer objetos anidados [#objects]

Usa `.obj(id)` para leer un grupo anidado de entradas; por ejemplo, para recorrer un conjunto de labels.

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

## Sitemap

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