Обзор

Хук useMessages предназначен для перевода закодированных строк из msg на этапе сборки.

const m = useMessages();

<p>{  m(encodedString)  }</p>;

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

Параметры

Отсутствуют

Возвращает

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

(encodedContent: string, options?: Record<string, any>) => string

Поведение

Продакшен

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

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

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

Разработка

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

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

Пример

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

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

import { msg, useMessages } from 'gt-next';

const encodedGreeting = msg('Привет, Алиса!');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting)}
    </p>
  );
}

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

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

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

import { msg, useMessages } from 'gt-next';

const encodedGreeting = msg('Привет, {name}!', { name: 'Alice' });

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}
    </p>
  );
}

Примечание: Будет показано "Hello, Bob!" — переменная переопределяется во время рендеринга.

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

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

import { msg, useMessages } from 'gt-next';

const encodedMessage = msg('В корзине {count, plural, =0 {нет товаров} =1 {один товар} few {{count} товара} other {{count} товаров}}', { count: 10 });

export default function TranslateGreeting() {
  const m = useMessages();
  return (
    <p>
      {m(encodedMessage)}
    </p>
  );
}

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

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

"use client";
import { msg, useMessages } from 'gt-next/client';

const encodedGreeting = msg('Привет, Алиса!');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting)}
    </p>
  );
}

Примечания

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

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

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