# gt-next: General Translation Next.js SDK: useTranslations
URL: https://generaltranslation.com/ja/docs/next/api/dictionary/use-translations.mdx
---
title: useTranslations
description: useTranslationsフックのAPIリファレンス
---

## 概要

`useTranslations` は、[翻訳辞書](/docs/next/guides/dictionaries)内の文字列翻訳にアクセスするために使用します。

[`<GTProvider>`](/docs/next/api/components/gtprovider) でラップされたコンポーネント内で使用する必要があります。

```jsx
const t = useTranslations(); // 翻訳関数を取得する
t('greeting.hello'); // idを渡して翻訳を取得する
```

非同期コンポーネントについては、[`getTranslations`](/docs/next/api/dictionary/get-translations)を参照してください。

<Callout>
  `getTranslations` と `useTranslations` は、翻訳対象のすべてのコンテンツを保持するために[辞書](/docs/next/guides/dictionaries)を使用します。
  これは、翻訳に [`<T>` コンポーネント](/docs/next/guides/t) を使用する方法とは異なります。
  翻訳に `<T>` コンポーネントのみを使用したい場合、このドキュメントは関係ありません。
</Callout>

## リファレンス

### パラメーター

<TypeTable
  type={{
  "id?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
}}
/>

### 説明

| プロパティ | 説明                                                |
| ----- | ------------------------------------------------- |
| `id`  | すべての翻訳キーの先頭に付ける省略可能なプレフィックスです。ネストされた辞書値を扱う際に便利です。 |

### 戻り値

id を受け取り、対応するエントリの翻訳済みバージョンを返す翻訳関数 `d`

```jsx
(id: string, options?: DictionaryTranslationOptions) => string
```

| 名前         | 型                                                                                     | 説明                        |
| ---------- | ------------------------------------------------------------------------------------- | ------------------------- |
| `id`       | `string`                                                                              | 翻訳対象のエントリの id             |
| `options?` | [`DictionaryTranslationOptions`](/docs/next/api/types/dictionary-translation-options) | `d` の動作をカスタマイズするためのオプション。 |

***

## 例

### 基本的な辞書の使い方

辞書内のすべての項目が翻訳対象になります。

```jsx title="dictionary.jsx" copy
const dictionary = {
  greeting: "Hello, Bob", // [!code highlight]
};
export default dictionary;
```

これらのエントリにアクセスするには (クライアント側では) 、`useTranslations` を呼び出します。
これにより、辞書内の翻訳キーを受け取る関数が返されます。

```jsx title="TranslateGreeting.jsx" copy
import { useTranslations } from 'gt-next';

export default async function TranslateGreeting() {
  const t = useTranslations(); // [!code highlight]
  return (
    <p>
      {t('greeting')} // こんにちは、Alice // [!code highlight]
    </p>
  );
}
```


### 変数の使用 [#variables]

値を渡すには、(1) 識別子を割り当て、(2) `d` 関数を呼び出す際にその識別子を参照する必要があります。

この例では、`{}` を使って翻訳に変数を渡します。
辞書では、識別子として `{userName}` を割り当てます。

```jsx title="dictionary.jsx" copy
// [!code word:userName]
const dictionary = {
  greeting: "こんにちは、{userName}！", // [!code highlight]
};
export default dictionary;
```

```jsx title="src/server/TranslateGreeting.jsx" copy
// [!code word:userName]
import { useTranslations } from 'gt-next';

export default async function TranslateGreeting() {
  const t = useTranslations();
  
  // こんにちは、Alice！
  const greetingAlice = t('greeting', { userName: "Alice" }); // [!code highlight]

  return (
    <p>
      {greetingAlice}
    </p>
  );
}
```


### プレフィックスを使う

プレフィックスを使うと、辞書の一部だけを翻訳できます。

```jsx title="dictionary.jsx" copy
const dictionary = {
  prefix1: { // [!code highlight]
    prefix2: { // [!code highlight]
      greeting: "Hello, Bob",
    }
  }
};
export default dictionary;
```

`useTranslations` フックに `'prefix1.prefix2'` を指定しているため、すべてのキーに `prefix1.prefix2` というプレフィックスが付きます:

```jsx title="UserDetails.jsx" copy
import { useTranslations } from 'gt-next';

export default function UserDetails() {
  const t = useTranslations('prefix1.prefix2'); // [!code highlight]
  return (
    <div>
      <p>{t('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
    </div>
  );
}
```

***


## 注意

* `useTranslations` 関数を使うと、クライアントサイドで辞書翻訳を利用できます。
* `useTranslations` フックは、[`<GTProvider>` コンポーネント](/docs/next/api/components/gtprovider)でラップされたコンポーネント内でのみ使用できます。

## 次のステップ

* サーバーサイドでの翻訳については、[`getTranslations`](/docs/next/api/dictionary/get-translations)を参照してください。
* 辞書の使い方について詳しくは、[辞書リファレンス](/docs/next/guides/dictionaries)を参照してください。