# gt-next: General Translation Next.js SDK: Динамический контент
URL: https://generaltranslation.com/ru/docs/next/guides/dynamic-content.mdx
---
title: Динамический контент
description: Как переводить контент во время выполнения с помощью серверных API перевода
---

Перевод динамического контента применяется к тексту, который недоступен на этапе сборки, — пользовательскому контенту, ответам API или записям в базе данных. Используйте [`<Tx>`](/docs/next/api/components/tx) для JSX-контента и [`tx`](/docs/next/api/strings/tx) для обычных строк; оба варианта из соображений безопасности работают только на сервере.

<Callout type="warn">
  **Используйте с осторожностью:** Динамический перевод расходует квоту API и увеличивает задержку. По возможности предпочитайте [компоненты `<T>`](/docs/next/guides/t) и [переменные компоненты](/docs/next/guides/variables).
</Callout>

## Когда использовать динамический перевод

Динамический перевод нужен для контента, который действительно невозможно определить на этапе сборки:

### Подходящие случаи использования

* **Пользовательский контент**: сообщения в чате, отзывы, публикации в соцсетях
* **Ответы внешних API**: данные сторонних сервисов, RSS-ленты, внешние сервисы
* **Записи в базе данных**: динамический контент CMS, профили пользователей из API
* **Данные в реальном времени**: уведомления в реальном времени, сообщения о статусе

### Не используйте в следующих случаях

* Имена пользователей, номера аккаунтов → Используйте [`<Var>`](/docs/next/api/components/var)
* Условные сообщения → Используйте [компоненты ветвления](/docs/next/guides/branches)
* Валидация форм → Используйте [перевод строк](/docs/next/guides/strings)
* Статическая конфигурация → Используйте [общие строки](/docs/next/guides/shared-strings)

## Быстрый старт

### JSX-контент с Tx

```jsx
import { Tx } from 'gt-next';

async function UserPost({ postContent }) {
  return (
    <article>
      <Tx>{postContent}</Tx>
    </article>
  );
}
```


### Обычные строки с tx

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

async function NotificationBanner({ message }) {
  const translatedMessage = await tx(message);
  
  return (
    <div className="banner">
      {translatedMessage}
    </div>
  );
}
```


## Только на сервере

Из соображений безопасности и [`<Tx>`](/docs/next/api/components/tx), и [`tx`](/docs/next/api/strings/tx) доступны только на сервере:

```jsx
// ✅ Серверный компонент
async function ServerComponent() {
  const translated = await tx(dynamicContent);
  return <div>{translated}</div>;
}

// ❌ Клиентский компонент — не будет работать
'use client';
function ClientComponent() {
  const translated = await tx(dynamicContent); // Ошибка!
  return <div>{translated}</div>;
}
```


## Примеры

### Пользовательский контент

```jsx
import { Tx } from 'gt-next';

async function ChatMessage({ message }) {
  return (
    <div className="chat-message">
      <div className="author">{message.author}</div>
      <Tx>{message.content}</Tx>
    </div>
  );
}
```


### Данные из внешнего API

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

async function NewsArticle({ article }) {
  const translatedTitle = await tx(article.title);
  
  return (
    <article>
      <h1>{translatedTitle}</h1>
      <p>{article.publishedAt}</p>
    </article>
  );
}
```


### Смешанный контент

```jsx
import { T, Tx, Var } from 'gt-next';

async function ProductReview({ review }) {
  return (
    <div>
      {/* Статический контент с переменными */}
      <T>
        <p><Var>{review.author}</Var> rated this <Var>{review.rating}</Var> stars</p>
      </T>
      
      {/* Динамический пользовательский контент */}
      <Tx>{review.content}</Tx>
    </div>
  );
}
```


## Использование маршрутов API

[`tx`](/docs/next/api/strings/tx) работает в обработчиках маршрутов API в Next.js, а не только в серверных компонентах:

```tsx
// app/api/translate/route.ts
import { tx } from 'gt-next/server';
import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  const { text, locale } = await request.json();
  const translated = await tx(text, { locale });
  return NextResponse.json({ translated });
}
```

Это полезно, когда вам нужно предоставить перевод через API-эндпоинт — например, для клиентских компонентов или внешних сервисов.


## Клиентский подход к переводу

Поскольку [`tx`](/docs/next/api/strings/tx) доступен только на сервере, клиентские компоненты могут переводить динамический контент через маршрут API, выступающий в роли прокси:

```tsx
'use client';

async function translateText(text: string) {
  const res = await fetch('/api/translate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text, locale: 'fr' }),
  });
  const { translated } = await res.json();
  return translated;
}
```

Это в сочетании с [маршрутом API выше](#api-route-usage) обеспечивает клиентским компонентам доступ к динамическому переводу.

## Перевод нескольких элементов

Используйте `Promise.all`, чтобы переводить массивы контента параллельно:

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

const translatedPosts = await Promise.all(
  posts.map(async (post) => ({
    ...post,
    title: await tx(post.title),
  }))
);
```

Это полезно при переводе списков записей из базы данных, ответов API и любых наборов динамических строк.


## Типичные проблемы

### Не злоупотребляйте

Не используйте динамический перевод для контента, где можно обойтись стандартными компонентами:

```jsx
// ❌ Излишнее использование
const content = `Hello, ${userName}!`;
return <Tx>{content}</Tx>;

// ✅ Используйте переменные компоненты вместо этого
return (
  <T>
    <p>Hello, <Var>{userName}</Var>!</p>
  </T>
);
```


### Влияние на квоту API

Динамический перевод расходует квоту API при каждом запросе. В рабочих приложениях используйте кэширование и обработку ошибок.

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

<Callout>
  **Посмотрите в действии:** Откройте [пример приложения с динамическим контентом](https://github.com/gt-examples/dynamic-content-tx), чтобы посмотреть рабочую демонстрацию `tx()` и `<Tx>` — [предпросмотр в реальном времени](https://dynamic-content-tx.generaltranslation.dev).
</Callout>

* [Руководство по локальному переводу](/docs/next/guides/local-tx) - Работа с переводами без вызовов API
* [Руководство по middleware](/docs/next/guides/middleware) - Определение языка и маршрутизация
* Справочник API:
  * [Компонент `<Tx>`](/docs/next/api/components/tx)