# General Translation React SDKs (gt-react, gt-next): Перевод с помощью словарей
URL: https://generaltranslation.com/ru/docs/react/guides/translating-with-dictionaries.mdx
---

title: Перевод с помощью словарей
description: Как переводить строки из общего словаря с помощью хука useTranslations от General Translation в React, Next.js, TanStack Start и 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

---

Словарь хранит ваши переводимые строки в одном месте и обращается к ним по id, а не встраивает их прямо в компоненты. Это подходит командам, которые предпочитают централизованно управлять текстами или переходят с библиотеки i18n на основе ключей. В большинстве приложений вместо этого можно использовать [`<T>`](/docs/react/guides/translating-jsx) и [`useGT`](/docs/react/guides/translating-strings).

## Укажите словарь [#provide]

То, как вы регистрируете словари для каждой локали, зависит от фреймворка.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    Передайте словари в `GTProvider` через проп `dictionaries` вместе с обязательными `locale` и `translations`.

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

  <Tab value="Next.js">
    В Next.js словари не передаются в `GTProvider`. Создайте файл словаря в корне проекта и зарегистрируйте его с помощью конфигурационного плагина или позвольте системе обнаружить его автоматически.

    ```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">
    Передайте словари в `GTProvider` через проп `dictionaries` вместе с обязательными `locale` и `translations`.

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

  <Tab value="React Native">
    Передайте словари в `GTProvider` через проп `dictionaries` вместе с активной `locale`.

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

## Поиск записей с помощью `useTranslations` [#use-translations]

Вызовите [`useTranslations`](/docs/react/reference/hooks/use-translations), чтобы получить функцию для поиска, а затем передайте id записи. Подставляйте значения через объект параметров.

<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="Синхронные компоненты"
    import { useTranslations } from 'gt-next';

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

    ```tsx title="Асинхронные компоненты 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>

Передайте корневой id, чтобы все обращения выполнялись с этим префиксом. Это работает одинаково во всех фреймворках (`getTranslations('home')` на сервере Next.js):

```tsx
const t = useTranslations('home');
t('title'); // возвращает home.title
```

*Примечание: поиск id, которого нет в словаре, приводит к ошибке, поэтому следите, чтобы id и записи словаря были синхронизированы.*

## Чтение вложенных объектов [#objects]

Используйте `.obj(id)`, чтобы получить вложенную группу записей — например, для перебора набора меток.

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