# General Translation React SDKs (gt-react, gt-next): 辞書を使った翻訳
URL: https://generaltranslation.com/ja/docs/react/guides/translating-with-dictionaries.mdx
---

title: 辞書を使った翻訳
description: React、Next.js、TanStack Start、React Native で、General Translation の useTranslations フックを使って一元管理された辞書から文字列を翻訳する方法。
related:
  links:
    - /docs/react/guides/translating-strings
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/handling-plurals-and-branches
    - /docs/react/guides/formatting-variables

---

辞書を使うと、翻訳対象の文字列をコンポーネント内にインラインで書く代わりに、id をキーとして 1 か所にまとめて管理できます。これは、文言を一元管理したいチームや、キー ベースの i18n ライブラリから移行中のチームに適しています。ほとんどのアプリでは、代わりに [`<T>`](/docs/react/guides/translating-jsx) と [`useGT`](/docs/react/guides/translating-strings) を使用できます。

## 辞書を登録する [#provide]

ロケールごとの辞書の登録方法は、フレームワークによって異なります。

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    必須の `locale` と `translations` に加えて、`dictionaries` prop を使って辞書を `GTProvider` に渡します。

    ```tsx
    <GTProvider locale={locale} translations={translations} dictionaries={dictionaries}>
      <App />
    </GTProvider>;
    ```
  </Tab>

  <Tab value="Next.js">
    Next.js では、辞書を `GTProvider` に渡す必要はありません。プロジェクトルートに dictionary ファイルを作成し、設定プラグインで登録するか、自動検出させてください。

    ```json title="dictionary.json"
    {
      "home": { "title": "Welcome back" }
    }
    ```

    ```ts title="next.config.ts"
    import { withGTConfig } from 'gt-next/config';

    export default withGTConfig(nextConfig, { dictionary: './dictionary.json' });
    ```
  </Tab>

  <Tab value="TanStack Start">
    必須の `locale` と `translations` に加えて、`dictionaries` prop を使って辞書を `GTProvider` に渡します。

    ```tsx
    <GTProvider locale={locale} translations={translations} dictionaries={dictionaries}>
      <App />
    </GTProvider>;
    ```
  </Tab>

  <Tab value="React Native">
    使用中の `locale` に加えて、`dictionaries` prop を使って辞書を `GTProvider` に渡します。

    ```tsx
    <GTProvider locale={locale} dictionaries={dictionaries}>
      <App />
    </GTProvider>;
    ```
  </Tab>
</Tabs>

## `useTranslations` でエントリを参照する [#use-translations]

[`useTranslations`](/docs/react/reference/hooks/use-translations) を呼び出して参照関数を取得し、エントリ id を渡します。値を補間するには options object を使用します。

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { useTranslations } from 'gt-react';

    function Greeting() {
      const t = useTranslations();
      return <h1>{t('home.title')}</h1>;
    }
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx title="同期コンポーネント"
    import { useTranslations } from 'gt-next';

    function Greeting() {
      const t = useTranslations();
      return <h1>{t('home.title')}</h1>;
    }
    ```

    ```tsx title="非同期 App Router コンポーネント"
    import { getTranslations } from 'gt-next/server';

    async function Greeting() {
      const t = await getTranslations();
      return <h1>{t('home.title')}</h1>;
    }
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { useTranslations } from 'gt-tanstack-start';

    function Greeting() {
      const t = useTranslations();
      return <h1>{t('home.title')}</h1>;
    }
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { useTranslations } from 'gt-react-native';

    function Greeting() {
      const t = useTranslations();
      return <Text>{t('home.title')}</Text>;
    }
    ```
  </Tab>
</Tabs>

すべての参照を特定のプレフィックス配下にまとめるには、root id を渡します。これはどのフレームワークでも同じように動作します (Next.js サーバーでは `getTranslations('home')`) :

```tsx
const t = useTranslations('home');
t('title'); // home.title に解決される
```

*注: 辞書に存在しない id を参照すると例外が発生するため、id と辞書エントリの同期を保ってください。*

## ネストされたオブジェクトを取得する [#objects]

`.obj(id)` を使うと、ネストされたエントリのグループを取得できます。たとえば、ラベルのセットを map 処理する場合に便利です。

```tsx
const t = useTranslations();
const labels = t.obj('nav.links');
```
## Next steps

- /docs/react/guides/translating-strings
- /docs/react/guides/translating-jsx
- /docs/react/guides/handling-plurals-and-branches
- /docs/react/guides/formatting-variables