Обзор

Это пошаговое руководство по переводу строк в приложении Next.js с помощью useGT, getGT и tx.

Предварительные требования

Предполагается, что вы уже установили gt-next в свой проект и прошли (или проходите) раздел Быстрый старт.

Перевод строк

Клиентские компоненты

Для любых клиентских строк используйте useGT. Помните, что useGT нужно вызывать внутри дочернего компонента <GTProvider>.

import { useGT } from 'gt-next';

export default function MyComponent() {
  const t = useGT(); 
  return (
    <div>
      <h1>{t('Это переводимая строка')}</h1> // [!code highlight]
    </div>
  );
}

Компоненты на стороне сервера

Для любых серверных строк используйте getGT.

import { getGT } from 'gt-next/server';

export default async function Home() {
  const t = await getGT(); 
  return (
    <div>
      <h1>{t('Эта строка подлежит переводу')}</h1> // [!code highlight]
    </div>
  );
}

Добавление переменных

Переменные — это значения, которые могут меняться, но не переводятся. Чтобы добавить переменные в строки, используйте следующий шаблон:

import { useGT } from 'gt-next';

export default function MyComponent() {
  const t = useGT();
  return (
    <div>
      <h1>{t('Привет, {username}!', { variables: { username: 'Brian123' }})}</h1> // [!code highlight]
    </div>
  );
}

Это работает как с useGT, так и с getGT.

Динамический контент

Допустим, у вас есть строка, которая меняется. Вы можете использовать функцию tx, чтобы переводить строку во время выполнения.

import { tx } from 'gt-next/server';

export default async function MyComponent({ username }) {
  const translation = await tx(`Здравствуйте, ${username}. Как проходит ваш день?`); 
  return (
    <div>
      <h1>{translation}</h1> // [!code highlight]
    </div>
  );
}

Примечания

• Для перевода строк используйте useGT, getGT и tx.
• useGT и getGT выполняют перевод на этапе сборки, тогда как tx переводит во время выполнения. Используйте tx умеренно.
• Переменные можно добавлять в строки с помощью шаблона { variables: { key: value } }.

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

• Вернитесь к краткому руководству, чтобы завершить настройку проекта для перевода.
• См. справочник API по useGT, getGT и tx.