Обзор

Функция useGT — хук для перевода строк на этапе сборки.

const t = useGT();

<p>{  t('Этот текст будет переведен')  }</p>;

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

Параметры

Отсутствуют

Возвращает

Функцию обратного вызова t, которая переводит переданное содержимое.

(content: string, options?: InlineTranslationOptions) => string

Поведение

Продакшен

Во время процесса CD любой текст внутри функции t будет переведён до развертывания вашего приложения. Это обеспечивает быстрое время загрузки для всех локалей, но может переводить только контент, известный на этапе сборки.

После генерации переводы либо (1) сохраняются в CDN, либо (2) включаются в артефакты сборки вашего приложения — в зависимости от вашей конфигурации. После этого переведённый контент отдаётся вашим пользователям. Если перевод не найден, будет показан исходный текст.

Обязательно следуйте руководству по развертыванию.

Разработка

Во время разработки функция t переводит контент по запросу. Это полезно для прототипирования того, как будет выглядеть ваше приложение на разных языках. Не забудьте добавить Dev API key в переменные окружения, чтобы включить это поведение.

В режиме разработки при переводе по запросу будет небольшая задержка. В продакшн‑сборках этого не происходит, если только контент не переводится по запросу явно, то есть с использованием tx или <Tx>.

Пример

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

Вы можете использовать useGT для перевода строк.

import { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Привет, Алиса!')}
    </p>
  );
}

Примечание: «Alice» будет переведено на предпочтительный язык пользователя.

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

Вы можете передавать переменные в записи словаря.

import { useGT } from 'gt-next';

export default function ПереводПриветствия() {
  const t = useGT();

  return (
    <p>
      {t('Hello, {name}!', { name: 'Alice'  })}
    </p>
  );
}

Примечание: «Alice» не будет переведено на предпочитаемый пользователем язык, поскольку это переменная.

Использование формата сообщений ICU

gt-next поддерживает формат сообщений ICU, который позволяет форматировать и переменные.

import { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const t = useGT();
  return (
    <p>
      {t('В корзине {count, plural, =0 {нет товаров} =1 {один товар} few {{count} товара} many {{count} товаров} other {{count} товара}}', { count: 10 })}
    </p>
  );
}

Импорт из gt-next/client

Если вы используете директиву "use client", импортируйте из gt-next/client вместо gt-next.

"use client";
import { useGT } from 'gt-next/client';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Привет, Алиса!')}
    </p>
  );
}

Примечания

• Функция useGT — хук для перевода строк.
• Перевод строк с useGT выполняется до времени выполнения, на этапе сборки (кроме режима разработки).

Дальнейшие шаги

• См. getGT для асинхронного перевода строк на этапе сборки.
• Для перевода во время выполнения см. tx и <Tx>.