# gt-next: General Translation Next.js SDK: T
URL: https://generaltranslation.com/ru/docs/next/api/components/t.mdx
---
title: T
description: Справочник API по компоненту T
---

## Обзор

Компонент `<T>` — основной способ перевода в `gt-next`.

```jsx
<T>
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</T>
```

Компонент `<T>` поддерживает перевод как обычного текста, так и сложных JSX-структур.
Кроме того, он предоставляет возможности для работы с переменными, формами множественного числа и переводами с учетом контекста.

<Callout>
  **Перевод на этапе сборки:**
  Переводы в `<T>` выполняются на этапе сборки.
  Это означает, что перевод выполняется до развертывания, что позволяет снизить задержку.
  Обязательно следуйте [этому руководству по развертыванию](/docs/next/tutorials/quickdeploy).
</Callout>

***


## Справка

### Свойства

<TypeTable
  type={{
  "children": {
      type: 'any',
      optional: false,
  },
  "id?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "context?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Описания

| Prop       | Описание                                                                                                                   |
| ---------- | -------------------------------------------------------------------------------------------------------------------------- |
| `children` | Содержимое для перевода. Это может быть обычный текст или JSX-структуры.                                                   |
| `id`       | Необязательный уникальный идентификатор строки перевода. Если он не указан, то автоматически генерируется во время сборки. |
| `context`  | Дополнительный контекст для уточнения перевода. Полезен для устранения неоднозначности.                                    |

### Возвращает

`React.JSX.Element|undefined`, содержащий отрендеренный перевод или резервное содержимое в соответствии с указанной конфигурацией.

***

## Поведение

### Продакшен

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

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

Обязательно ознакомьтесь с [руководством по развертыванию](/docs/next/tutorials/quickdeploy).

### Разработка

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

Во время загрузки `<T>` будет возвращать undefined, если только языки не близки (en-US vs en-GB), хотя это поведение можно настроить с помощью параметров рендеринга.
Если произойдет ошибка, `<T>` вернет исходное содержимое.

При переводе по запросу в режиме разработки будет заметна задержка.
В production-сборках этой задержки не будет, если только содержимое не переводится по запросу явно,
то есть при использовании [`<Tx>`](/docs/next/api/components/tx) или [`tx`](/docs/next/api/strings/tx).

***

## Примеры

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

`<T>` переводит свой дочерний элемент.

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

export default function Greeting() {
    return (
        <T>
            Hello, world!
        </T>
    );
}
```

### С переменными

Вы можете использовать компонент `<Var>`, чтобы помечать дочерние элементы как переменные.
Это позволяет помечать содержимое, которое не должно переводиться.
Обычно компоненты `<Var>` оборачивают динамическое содержимое.

```jsx title="DynamicGreeting.jsx" copy
import { T, Var } from 'gt-next';

export default function DynamicGreeting(user) {
    return (
        <T>
            Hello, <Var>{user.name}</Var>!
        </T>
    );
}
```


### С использованием форм множественного числа

Компонент `<T>` также поддерживает множественное число с помощью компонента `<Plural>`.

```jsx title="ItemCount.jsx" copy
import { T, Plural } from 'gt-next';

export default function ItemCount({ count }) {
    return (
        <T>
            <Plural n={count} 
                one={<>You have an item.</>} 
                other={<>You have items.</>} 
            />
        </T>
    );
}
```


### Ограничения

Компонент `<T>` не переводит динамическое содержимое.

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

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} {/* вызовет ошибку */}
        </T>
    );
}
```

Функция `<T>` переводит дочерние элементы.

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

const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);

const InvalidTranslation = ({ children }) => (<div><b>No translation</b></div>);

export default function Example() {
    return (
        <T>
            { /* [!code highlight] */}
            <div><b>This is valid!</b></div> {/* будет переведено */}

            
            <ValidTranslation>
            { /* [!code highlight] */}
                Hello, world!  {/* будет переведено */}
            </ValidTranslation> 

            <InvalidTranslation /> {/* не будет переведено */}
        </T>
    );
}
```

<Callout>
  **Примечание:** Как правило, любой контент, который *буквально* находится между двумя `<T>` в файле, будет переведён.
  Вы всегда можете добавить ещё один `<T>`, чтобы перевести контент, который не переводится, хотя вкладывать компоненты `<T>` друг в друга не рекомендуется.
</Callout>

***


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

* Компонент `<T>` предназначен для перевода содержимого в вашем приложении. Это основной способ локализации в `gt-next`.
* Используйте компонент `<T>` для перевода обычного текста и JSX-структур, включая переменные и формы множественного числа.
* Если вы используете компонент `<T>` на стороне клиента, убедитесь, что он обёрнут в [`<GTProvider>`](/docs/next/api/components/gtprovider), чтобы иметь доступ к контексту перевода.

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

* Для переводов по запросу ознакомьтесь с компонентом [`<Tx>`](/docs/next/api/components/tx).
* О более расширенных возможностях см. в [справочнике по `<T>`](/docs/next/guides/t).
* Для перевода строк ознакомьтесь с [`tx`](/docs/next/api/strings/tx), [`getGT`](/docs/next/api/strings/get-gt) и [`useGT`](/docs/next/api/strings/use-gt).