# gt-next: General Translation Next.js SDK: Перевод строк
URL: https://generaltranslation.com/ru/docs/next/tutorials/translating-strings.mdx
---
title: Перевод строк
description: Как переводить строки
---

## Обзор

Это пошаговое руководство о том, как переводить строки в приложении Next.js с помощью
[`useGT`](/docs/next/api/strings/use-gt), [`getGT`](/docs/next/api/strings/get-gt) и [`tx`](/docs/next/api/strings/tx).

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

Предполагается, что `gt-next` уже установлен в вашем проекте и что вы уже следовали или сейчас следуете [краткому руководству](/docs/next).

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

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

Для любых строк на стороне клиента используйте [`useGT`](/docs/next/api/strings/use-gt).
Помните, что `useGT` нужно вызывать внутри дочернего компонента [`<GTProvider>`](/docs/next/api/components/gtprovider).

```jsx title="src/components/MyComponent.jsx" copy
import { useGT } from 'gt-next';

export default function MyComponent() {
  const gt = useGT(); // [!code highlight]
  return (
    <div>
      <h1>{gt('This is a string that gets translated')}</h1> // [!code highlight]
    </div>
  );
}
```

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

Для любых строк, обрабатываемых на стороне сервера, используйте [`getGT`](/docs/next/api/strings/get-gt).

```jsx title="src/pages/index.jsx" copy
import { getGT } from 'gt-next/server';

export default async function Home() {
  const gt = await getGT(); // [!code highlight]
  return (
    <div>
      <h1>{gt('This is a string that gets translated')}</h1> // [!code highlight]
    </div>
  );
}
```

<Callout>
  **Примечание:**
  Во время разработки, если вы переводите контент во время выполнения, вам потребуется обновить страницу, чтобы увидеть переведённую версию строки из [`getGT`](/docs/next/api/strings/get-gt).
  **В продакшене этого не происходит.**
</Callout>

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

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

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

export default function MyComponent() {
  const gt = useGT();
  return (
    <div>
      <h1>{gt('Hello there, {username}', { variables: { username: 'Brian123' }})}</h1> // [!code highlight]
    </div>
  );
}
```

Это работает и с [`useGT`](/docs/next/api/strings/use-gt), и с [`getGT`](/docs/next/api/strings/get-gt).


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

Допустим, у вас есть строка, значение которой меняется.
Вы можете использовать функцию [`tx`](/docs/next/api/strings/tx), чтобы переводить эту строку во время выполнения.

```jsx title="MyComponent.jsx" copy
import { tx } from 'gt-next/server';

export default async function MyComponent({ username }) {
  const translation = await tx(`Hello, ${username}. How is your day?`); // [!code highlight]
  return (
    <div>
      <h1>{translation}</h1> // [!code highlight]
    </div>
  );
}
```

<Callout>
  **Примечание:**
  Функция [`tx`](/docs/next/api/strings/tx) доступна только на стороне сервера и должна использоваться только при необходимости.
  Перевод во время выполнения часто добавляет задержку.
  По возможности используйте [`getGT`](/docs/next/api/strings/get-gt) или [`useGT`](/docs/next/api/strings/use-gt), чтобы переводить до развертывания.
</Callout>

***


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

* Для перевода строк используйте [`useGT`](/docs/next/api/strings/use-gt), [`getGT`](/docs/next/api/strings/get-gt) и [`tx`](/docs/next/api/strings/tx).
* `useGT` и `getGT` выполняют перевод до развертывания, а `tx` — во время выполнения. Используйте `tx` умеренно.
* Переменные можно добавлять в строки с помощью шаблона `{ variables: { key: value } }`.

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

* Вернитесь к [краткому руководству](/docs/next), чтобы завершить настройку проекта для перевода.
* См. справочник API для [`useGT`](/docs/next/api/strings/use-gt), [`getGT`](/docs/next/api/strings/get-gt) и [`tx`](/docs/next/api/strings/tx).