# gt-next: General Translation Next.js SDK: useTranslations
URL: https://generaltranslation.com/ru/docs/next/api/dictionary/use-translations.mdx
---
title: useTranslations
description: Справочник по API хука useTranslations
---

## Обзор

`useTranslations` используется для получения переводов строк из [словаря переводов](/docs/next/guides/dictionaries).

Его нужно использовать внутри компонента, обёрнутого в [`<GTProvider>`](/docs/next/api/components/gtprovider).

```jsx
const t = useTranslations(); // Получить функцию перевода
t('greeting.hello'); // передать id для получения перевода
```

Для асинхронных компонентов см. [`getTranslations`](/docs/next/api/dictionary/get-translations).

<Callout>
  `getTranslations` и `useTranslations` используют [словарь](/docs/next/guides/dictionaries) для хранения всего содержимого, предназначенного для перевода.
  Это отличается от перевода с помощью [компонента `<T>`](/docs/next/guides/t).
  Если вас интересует только перевод с использованием компонентов `<T>`, этот документ к вам не относится.
</Callout>


## Справочник

### Параметры

<TypeTable
  type={{
  "id?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Описание

| Свойство | Описание                                                                                                                    |
| -------- | --------------------------------------------------------------------------------------------------------------------------- |
| `id`     | Необязательный префикс, который добавляется ко всем ключам перевода. Удобно при работе со значениями во вложенных словарях. |

### Возвращает

Функцию перевода `d`, которая по id возвращает переведённую версию соответствующей записи

```jsx
(id: string, options?: DictionaryTranslationOptions) => string
```

| Имя        | Тип                                                                                   | Описание                             |
| ---------- | ------------------------------------------------------------------------------------- | ------------------------------------ |
| `id`       | `string`                                                                              | id записи, которую нужно перевести |
| `options?` | [`DictionaryTranslationOptions`](/docs/next/api/types/dictionary-translation-options) | Параметры перевода для настройки работы `d`.  |

***

## Примеры

### Базовое использование словаря

Все записи в вашем словаре переводятся.

```jsx title="dictionary.jsx" copy
const dictionary = {
  greeting: "Hello, Bob", // [!code highlight]
};
export default dictionary;
```

Когда нужно обратиться к этим записям (на стороне клиента), вызовите `useTranslations`.
Она вернёт функцию, которая принимает ключ перевода из словаря.

```jsx title="TranslateGreeting.jsx" copy
import { useTranslations } from 'gt-next';

export default async function TranslateGreeting() {
  const t = useTranslations(); // [!code highlight]
  return (
    <p>
      {t('greeting')} // Привет, Алиса // [!code highlight]
    </p>
  );
}
```


### Использование переменных [#variables]

Чтобы передать значения, необходимо (1) задать идентификатор и (2) использовать его при вызове функции `d`.

В этом примере для передачи переменных в перевод мы используем `{}`.
В словаре мы задаём идентификатор `{userName}`.

```jsx title="dictionary.jsx" copy
// [!code word:userName]
const dictionary = {
  greeting: "Hello, {userName}!", // [!code highlight]
};
export default dictionary;
```

```jsx title="src/server/TranslateGreeting.jsx" copy
// [!code word:userName]
import { useTranslations } from 'gt-next';

export default async function TranslateGreeting() {
  const t = useTranslations();
  
  // Привет, Алиса!
  const greetingAlice = t('greeting', { userName: "Alice" }); // [!code highlight]

  return (
    <p>
      {greetingAlice}
    </p>
  );
}
```


### Использование префиксов

Префиксы можно использовать, чтобы переводить только часть словаря.

```jsx title="dictionary.jsx" copy
const dictionary = {
  prefix1: { // [!code highlight]
    prefix2: { // [!code highlight]
      greeting: "Hello, Bob",
    }
  }
};
export default dictionary;
```

Поскольку мы добавили значение `'prefix1.prefix2'` в хук `useTranslations`, ко всем ключам добавляется префикс `prefix1.prefix2`:

```jsx title="UserDetails.jsx" copy
import { useTranslations } from 'gt-next';

export default function UserDetails() {
  const t = useTranslations('prefix1.prefix2'); // [!code highlight]
  return (
    <div>
      <p>{t('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
    </div>
  );
}
```

***


## Примечания

* Функция `useTranslations` предоставляет доступ к словарным переводам на стороне клиента.
* Хук `useTranslations` можно использовать только внутри компонента, обёрнутого в [компонент `<GTProvider>`](/docs/next/api/components/gtprovider).

## Следующие шаги

* О переводах на сервере см. [`getTranslations`](/docs/next/api/dictionary/get-translations).
* Подробнее об использовании словарей см. в [справочнике по словарям](/docs/next/guides/dictionaries).