# General Translation React SDKs (gt-react, gt-next): Traducir con diccionarios
URL: https://generaltranslation.com/es/docs/react/guides/translating-with-dictionaries.mdx
---

title: Traducir con diccionarios
description: Cómo traducir cadenas desde un diccionario central con el hook useTranslations de General Translation en React, Next.js, TanStack Start y React Native.
related:
  links:
    - /docs/react/guides/translating-strings
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/handling-plurals-and-branches
    - /docs/react/guides/formatting-variables

---

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` mediante la prop `dictionaries`, junto con `locale` y `translations`, que son obligatorias.

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

  <Tab value="Next.js">
    En Next.js no pasas diccionarios a `GTProvider`. 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` mediante la prop `dictionaries`, junto con `locale` y `translations`, que son obligatorias.

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

  <Tab value="React Native">
    Pasa tus diccionarios a `GTProvider` mediante la prop `dictionaries`, junto con la `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
    import { useTranslations } from 'gt-tanstack-start';

    function Greeting() {
      const t = useTranslations();
      return <h1>{t('home.title')}</h1>;
    }
    ```
  </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 un id raíz para delimitar todas las búsquedas bajo un prefijo. Esto funciona igual en todos los frameworks (`getTranslations('home')` en el servidor de Next.js):

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