# gt-next: General Translation Next.js SDK: RuntimeTranslationOptions
URL: https://generaltranslation.com/ja/docs/next/api/types/runtime-translation-options.mdx
---
title: RuntimeTranslationOptions
description: RuntimeTranslationOptions 型のAPIリファレンス
---

## 概要

`RuntimeTranslationOptions` 型は、インライン翻訳に変数を渡し、そのレンダリング方法を指定するために使用します。
翻訳に別の言語を指定したい場合は、ロケールを追加することもできます。
これは [`tx`](/docs/next/api/strings/tx) 関数で使用します。

<Callout>
  **ランタイム翻訳:**
  必要なときに変数を翻訳するには、[`tx`](/docs/next/api/strings/tx) に渡す文字列へ変数を直接含めてください。
  `options` オブジェクト経由で `tx` に渡した変数は翻訳されません。
</Callout>

## リファレンス

### パラメータ

<TypeTable
  type={{
  "[variable]?": {
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "$locale?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "$context?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "$maxChars?": {
      type: 'number',
      optional: true,
      default: 'undefined',
  },
}}
/>

### 説明

| Prop         | 説明                                                                               |
| ------------ | -------------------------------------------------------------------------------- |
| `[variable]` | 変数は `options` オブジェクトのトップレベルキーとして渡します。キー名は文字列内のプレースホルダー (例: `{username}`) に対応します。 |
| `$locale`    | 翻訳に使用するロケールを指定します。指定しない場合は、アプリでサポートされている中から、ブラウザで最も優先度の高いロケールが使用されます。            |
| `$maxChars`  | 翻訳の文字数を制限します。ライブラリはこの制限を厳密に適用します。                                                |

***

## 例

### 変数を渡す

文字列に変数を追加するには、`{variable-name}` 構文を使用します。中かっこで変数名を囲みます。

```jsx title="Component.tsx"
// [!code word:username]
import { tx } from 'gt-next/server';

const Component = () => {
  return <div>
    {tx(`Hello, {username}!`,{ username: 'Brian123' })}
  </div>;
};
```


### ICU メッセージ形式を使う

`gt-next` は ICU メッセージ形式に対応しており、変数の書式設定も可能です。

```jsx title="Component.tsx"
// [!code word:account-balance]
import { tx } from 'gt-next/server';

const Component = () => {
  return <div>
    { tx(
      'Your account balance: {dollars, number, ::currency/USD}!',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};
```


### 変数の翻訳

変数を翻訳するには、`tx` に渡す文字列にその変数を直接埋め込みます。

```jsx title="Component.tsx"
import { tx } from 'gt-next/server';

const Component = ({ hairColor }: { hairColor: string }) => {
  return <div>{tx(
    `Hello, {username}! Your haircolor is ${hairColor}`,
    { username: 'Brian123' }
  )}</div>;
};
```

変数 `hairColor` は翻訳対象になりますが、`username` はなりません。


### ロケールを指定する

翻訳に使用するロケールを指定できます。

```jsx title="Component.tsx"
import { tx } from 'gt-next/server';

const Component = () => {
  return <div>{tx('Hello, world!', { $locale: 'fr' })}</div>;
};
```

これは常にフランス語に翻訳されます。

### 字符制限

翻訳の長さを制限するには、`$maxChars` を使用します。

```jsx title="Component.tsx"
// [!code word:$maxChars]
import { tx } from 'gt-next/server';

const Component = () => {
  return <div>{tx('Welcome to our application', { $maxChars: 15 })}</div>;
  // Output: "Bienvenue à no\u202F…"
};
```

***


## 注記

* `RuntimeTranslationOptions` は、ランタイム で文字列を翻訳する際に使用されます。
* 変数は `variables` キーの下にネストするのではなく、options オブジェクトのトップレベルのキーとして渡します。

## 次のステップ

* インライン文字列の翻訳について詳しくは、[`tx`](/docs/next/api/strings/tx) を参照してください。
* 書式設定オプションについて詳しくは、[`ICU メッセージ形式`](https://unicode-org.github.io/icu/userguide/format_parse/messages/) を参照してください。