# General Translation React SDKs (gt-react, gt-next, gt-react-native): 辞書を使った翻訳
URL: https://generaltranslation.com/ja/docs/react/guides/translating-with-dictionaries.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: General Translation の useTranslations フックを使って一元管理された辞書から文字列を翻訳する方法。

辞書を使うと、翻訳対象の文字列をコンポーネント内にインラインで書く代わりに、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`](/docs/react/reference/components/gt-provider#locale) と [`translations`](/docs/react/reference/components/gt-provider#translations) に加えて、[`dictionaries`](/docs/react/reference/components/gt-provider#dictionaries) prop を使って辞書を [`GTProvider`](/docs/react/reference/components/gt-provider) に渡します。

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

  <Tab value="Next.js">
    Next.js では、[`dictionaries`](/docs/react/reference/components/gt-provider#dictionaries) を [`GTProvider`](/docs/react/reference/components/gt-provider) に渡す必要はありません。プロジェクトルートに dictionary ファイルを作成し、config プラグインで登録するか、自動検出させてください。

    ```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`](/docs/react/reference/components/gt-provider#locale) と [`translations`](/docs/react/reference/components/gt-provider#translations) に加えて、[`dictionaries`](/docs/react/reference/components/gt-provider#dictionaries) prop を使って辞書を [`GTProvider`](/docs/react/reference/components/gt-provider) に渡します。

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

  <Tab value="React Native">
    使用中の [`locale`](/docs/react/reference/components/gt-provider#locale) に加えて、[`dictionaries`](/docs/react/reference/components/gt-provider#dictionaries) prop を使って辞書を [`GTProvider`](/docs/react/reference/components/gt-provider) に渡します。

    ```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 title="コンポーネント"
    import { useTranslations } from 'gt-tanstack-start';

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

    ```ts title="サーバー関数"
    import { createServerFn } from '@tanstack/react-start';
    import { getTranslations } from 'gt-tanstack-start';

    export const loadGreeting = createServerFn({ method: 'GET' }).handler(
      async () => {
        const t = await getTranslations();
        return t('home.title');
      }
    );
    ```

    サーバー helper を使用する前に [`gtMiddleware`](/docs/react/tanstack-start/reference/functions/gt-middleware) を登録します。
  </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>

すべての参照をプレフィックス配下にまとめるには、[`rootId`](/docs/react/reference/hooks/use-translations#root-id) を渡します。これはどのフレームワークでも同じように動作します (Next.js と TanStack Start のサーバーコードでは `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

## Sitemap

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