Обзор

useTranslations используется для доступа к строкам переводов из словаря переводов.

Его следует использовать внутри компонента, обёрнутого в <GTProvider>.

const d = useTranslations(); // Получаем функцию перевода
d('greeting.hello'); // передаём id для получения перевода

Для асинхронных компонентов см. getTranslations.

Справочные материалы

Параметры

Описание

Возвращает

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

(id: string, options?: DictionaryTranslationOptions) => React.ReactNode

Примеры

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

Каждая запись в вашем словаре будет переведена.

const dictionary = {
  greeting: "Привет, Боб", 
};
export default dictionary;

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

import { useTranslations } from 'gt-next';

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

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

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

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

const dictionary = {
  greeting: "Привет, {userName}!", 
};
export default dictionary;

import { useTranslations } from 'gt-next';

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

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

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

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

const dictionary = {
  prefix1: { 
    prefix2: { 
      greeting: "Привет, Боб",
    }
  }
};
export default dictionary;

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

import { useTranslations } from 'gt-next';

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

Примечания

• Функция useTranslations позволяет получать переводы из словаря на стороне клиента.
• Хук useTranslations можно использовать только внутри компонента, обёрнутого компонентом <GTProvider>.

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

• О серверных переводах см. getTranslations.
• Подробнее об использовании словарей — в справочнике по словарям.