# gt-next: General Translation Next.js SDK: Tx
URL: https://generaltranslation.com/ja/docs/next/api/components/tx.mdx
---
title: Tx
description: Tx コンポーネントの API リファレンス
---

## 概要

`<Tx>` コンポーネントは、runtime で JSX コンテンツを翻訳します。

```jsx
{/* [!code highlight] */}
<Tx>
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</Tx> // [!code highlight]
```

`<Tx>` コンポーネントは、プレーンテキストだけでなく、複雑な JSX 構造の翻訳にも対応しています。
さらに、変数、複数形、文脈に応じた翻訳を扱うための機能も備えています。
`<Tx>` はサーバーサイド専用です。

<Callout>
  **Runtime Translation:**
  `<Tx>` の翻訳は runtime で実行されます。
  つまり、翻訳はその場で行われます。
</Callout>

***


## リファレンス

### Props

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

### 説明

| Prop       | 説明                                                                    |
| ---------- | --------------------------------------------------------------------- |
| `children` | 翻訳対象のコンテンツです。プレーンテキストや JSX 構造を含めることができます。                             |
| `context`  | 翻訳をより適切にするための追加コンテキストです。あいまいなフレーズの解消に役立ちます。                           |
| `locale`   | 翻訳に使用する省略可能なロケールです。デフォルトでは、アプリがサポートしているロケールのうち、ブラウザで最も優先されるものが使用されます。 |
| `maxChars` | 翻訳に使用する省略可能な最大文字数です。ライブラリはこの上限を厳密に適用します。                              |

***

## 動作

`<Tx>` は runtime で JSX を翻訳します。
つまり、翻訳はその場で実行されるため、runtime でしか判明しないコンテンツも翻訳できます。
その代わり、オンデマンド翻訳の読み込みを待つ間に遅延が発生し、パフォーマンスは大幅に低下します。

読み込み中、`<Tx>` は、言語が近い場合 (en-US と en-GB など) を除いて undefined を返しますが、この動作は render settings でカスタマイズできます。
エラーが発生した場合、`<Tx>` は元のコンテンツを返します。

推奨されるのは、[`<T>`](/docs/next/api/components/t)、[`getGT`](/docs/next/api/strings/use-gt)、または [`useGT`](/docs/next/api/strings/use-gt) を使って、build time に可能な限りすべてを翻訳し、
必要な場合にのみ、`<Tx>` や [`tx`](/docs/next/api/strings/tx) のようなオンデマンド翻訳を使用することです。

必ず[こちらのデプロイガイド](/docs/next/tutorials/quickdeploy)に従ってください。

***

## 例

### 基本的な使い方

`<Tx>` コンポーネントは、その子要素を runtime で翻訳します。

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

export default function Greeting() {
    return (
        {/* [!code highlight] */}
        <Tx>
            Hello, world!
        </Tx> // [!code highlight]
    );
}
```

### 変数を使う

`<Var>` コンポーネントを使うと、子要素を変数としてマークできます。
これにより、翻訳しない内容を指定できます。

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

export default function DynamicGreeting(user) {
    return (
        <Tx>
            {/* [!code highlight] */}
            Hello, <Var>{user.name}</Var>
        </Tx>
    );
}
```

### 複数形を使う

`<T>` コンポーネントは、`<Plural>` コンポーネントを使った複数形処理にも対応しています。

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

export default function ItemCount({ count }) {
    return (
        <Tx>
            <Plural n={count}  // [!code highlight] 
                one={<>You have an item.</>}  // [!code highlight] 
                other={<>You have items.</>}  // [!code highlight] 
            // [!code highlight]
            />  
        </Tx>
    );
}
```

### 制限事項

`<Tx>` 関数が翻訳するのは、その配下の要素のみです。

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

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

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

export default function Example() {
    return (
        <Tx>
            {/* [!code highlight] */}
            <div><b>This is valid!</b></div> // 翻訳されます 

            {/* [!code highlight] */}
            <ValidTranslation> // 翻訳されます 
            {/* [!code highlight] */}
                Hello, world!
            {/* [!code highlight] */}
            </ValidTranslation>

            <InvalidTranslation /> // 翻訳されません
        </Tx>
    );
}
```

<Callout>
  **注:** ひとつの目安として、ファイル内で 2 つの `<Tx>` に *文字どおり*挟まれているコンテンツは、すべて翻訳されます。
  翻訳されていないコンテンツを翻訳したい場合は、別の `<Tx>` を追加できます。ただし、`<Tx>` コンポーネントを入れ子にすることは推奨されません。
</Callout>

***

## 注意事項

* `<Tx>` コンポーネントは、アプリケーション内のコンテンツを runtime で翻訳するために設計されています。
* プレーンテキストや JSX 構造 (変数や複数形を含む) を翻訳するには、`<Tx>` コンポーネントを使用します。

## 次のステップ

* ビルド時の翻訳については、[`<T>`](/docs/next/api/components/t) コンポーネントを参照してください。
* より高度な機能については、[`<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) を参照してください。