# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<Tx>`
URL: https://generaltranslation.com/ja/docs/react/nextjs/reference/components/tx.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 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         | 説明                                       | 型        | 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>;
}
```

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.