# General Translation React SDKs (gt-react, gt-next): Tx
URL: https://generaltranslation.com/ja/docs/react/nextjs/reference/components/tx.mdx
---

title: Tx
description: General Translation を使用して、Next.js App Router のサーバーコンポーネントでリクエスト時に JSX を翻訳します。Tx の API リファレンス。

---

`<Tx>` コンポーネントは、General Translation API を通じてリクエスト時に JSX を翻訳します。build time には内容が確定しない動的コンテンツに使用し、静的なソースコンテンツには [`<T>`](/docs/react/reference/components/t) を使用してください。

`<Tx>` はサーバー専用で、Pages Router では動作しません。

## 概要 [#overview]

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

<Tx context="Greeting loaded at request time">Welcome back</Tx>;
```

## Props [#props]

| Prop         | 説明                     | Type        | Optional | Default       |
| ------------ | ---------------------- | ----------- | -------- | ------------- |
| `children`   | 翻訳する JSX コンテンツ。        | `ReactNode` | いいえ      | —             |
| `context`    | 翻訳の指針となるコンテキスト。        | `string`    | はい       | —             |
| `maxChars`   | 翻訳後のコンテンツの最大文字数。       | `number`    | はい       | —             |
| `locale`     | 対象ロケールの上書き。            | `string`    | はい       | 現在のリクエストのロケール |
| `[variable]` | 翻訳後のコンテンツに挿入される名前付き変数。 | `ReactNode` | はい       | —             |

## 戻り値 [#returns]

**型** `Promise<ReactNode>`

## 例 [#example]

```tsx title="app/profile/page.tsx"
import { Tx } from 'gt-next/server';

export default async function ProfilePage() {
  return <Tx context="Account page heading">Welcome back</Tx>;
}
```