言語の切り替え

言語切り替えにより、ユーザーはアプリケーションのコンテンツ表示に用いる希望のlocaleを変更できます。GT Nextは、シンプルなプログラムによる切り替えから、ミドルウェアを用いた完全なURLベースのルーティングまで、複数の方法を提供します。

利用可能な方法

プログラムによる制御: カスタムコントロール向けのuseSetLocaleフック
プリセットUI: ドロップダウン付きの<LocaleSelector>コンポーネント
カスタムUI: カスタムセレクターを作成するためのuseLocaleSelectorフック
URLベース: URLパス内のlocaleに対応するミドルウェアルーティング

`useSetLocale` フックの使用

useSetLocale フックは、アプリの言語を切り替えるためのクライアントサイドのフックです。

import { useSetLocale } from 'gt-next/client';

export default function MyComponent() {
  const setLocale = useSetLocale();

  return <button onClick={() => setLocale('en')}>言語を設定する</button>;
}

フックが返す関数に、変更したいlocaleを引数として渡すだけです。

`<LocaleSelector>` コンポーネントの使用

<LocaleSelector> コンポーネントは、設定済みの対応ロケールを自動的に表示する、すぐに使えるドロップダウンを提供します。

import { LocaleSelector } from 'gt-next/client';

export default function MyComponent() {
  return <LocaleSelector />;
}

このコンポーネントは自動的に以下を行います:

プロジェクトで設定されたすべての対応ロケールを表示する
ロケールを各言語のネイティブ名称で表示する
切り替え処理を担う
現在の選択状態を保持する

`useLocaleSelector` フックを使う

独自のロケールセレクターコンポーネントを作成する場合は、useLocaleSelector を使用してください。

import { useLocaleSelector } from 'gt-next/client';

function CustomLocaleSelector() {
  const { 
    locale,              // 現在のアクティブなロケール（例: 'en', 'es'）
    locales,             // プロジェクトが対応するロケールの配列（['en', 'es', 'fr']）
    setLocale,           // ロケールを変更する関数（例: setLocale('es')）
    getLocaleProperties  // ロケールの表示用情報を取得する関数
  } = useLocaleSelector();
  
  if (!locales?.length) return null;
  
  return (
    <select 
      value={locale || ''} 
      onChange={(e) => setLocale(e.target.value)}
    >
      {locales.map((loc) => {
        const props = getLocaleProperties(loc);
        return (
          <option key={loc} value={loc}>
            {props.nativeNameWithRegionCode} {/* 例: "English (US)", "Español (ES)" */}
          </option>
        );
      })}
    </select>
  );
}

URLベースの言語切り替え

SEO とより良い UX のために、ミドルウェアのルーティングを使って URL に locale を含められます。この手法の詳細は Middleware Guide を参照してください。

/en/products  → 英語の製品ページ  
/es/products  → スペイン語の製品ページ
/fr/products  → フランス語の製品ページ

このアプローチにより、SEOの向上、各言語版へのダイレクトリンク、共有しやすいローカライズ済みリンクが実現します。

重要な注意

クライアントコンポーネントのみ

すべての言語切り替え用のフックとコンポーネントは、'use client' が指定されたクライアントコンポーネント内でのみ使用する必要があります。

'use client';
import { useSetLocale } from 'gt-next/client';

function LanguageSwitcher() {
  const setLocale = useSetLocale();
  // ... component logic
}

GTProvider の要件

言語切り替えコンポーネントは、<GTProvider> の内部で使用する必要があります。

// ✅ 正しい
<GTProvider>
  <LanguageSwitcher />
</GTProvider>

// ❌ 間違い（プロバイダーの外側）
<LanguageSwitcher />

次のステップ

Middleware Guide - URL ベースの言語ルーティング
Dynamic Content Guide - 実行時のコンテンツ翻訳
APIリファレンス:
- useSetLocale Hook
- <LocaleSelector> Component

利用可能な方法

プログラムによる制御: カスタムコントロール向けのuseSetLocaleフック
プリセットUI: ドロップダウン付きの<LocaleSelector>コンポーネント
カスタムUI: カスタムセレクターを作成するためのuseLocaleSelectorフック
URLベース: URLパス内のlocaleに対応するミドルウェアルーティング

`useSetLocale` フックの使用

useSetLocale フックは、アプリの言語を切り替えるためのクライアントサイドのフックです。

import { useSetLocale } from 'gt-next/client';

export default function MyComponent() {
  const setLocale = useSetLocale();

  return <button onClick={() => setLocale('en')}>言語を設定する</button>;
}

フックが返す関数に、変更したいlocaleを引数として渡すだけです。

`<LocaleSelector>` コンポーネントの使用

<LocaleSelector> コンポーネントは、設定済みの対応ロケールを自動的に表示する、すぐに使えるドロップダウンを提供します。

import { LocaleSelector } from 'gt-next/client';

export default function MyComponent() {
  return <LocaleSelector />;
}

このコンポーネントは自動的に以下を行います:

プロジェクトで設定されたすべての対応ロケールを表示する
ロケールを各言語のネイティブ名称で表示する
切り替え処理を担う
現在の選択状態を保持する

`useLocaleSelector` フックを使う

独自のロケールセレクターコンポーネントを作成する場合は、useLocaleSelector を使用してください。

import { useLocaleSelector } from 'gt-next/client';

function CustomLocaleSelector() {
  const { 
    locale,              // 現在のアクティブなロケール（例: 'en', 'es'）
    locales,             // プロジェクトが対応するロケールの配列（['en', 'es', 'fr']）
    setLocale,           // ロケールを変更する関数（例: setLocale('es')）
    getLocaleProperties  // ロケールの表示用情報を取得する関数
  } = useLocaleSelector();
  
  if (!locales?.length) return null;
  
  return (
    <select 
      value={locale || ''} 
      onChange={(e) => setLocale(e.target.value)}
    >
      {locales.map((loc) => {
        const props = getLocaleProperties(loc);
        return (
          <option key={loc} value={loc}>
            {props.nativeNameWithRegionCode} {/* 例: "English (US)", "Español (ES)" */}
          </option>
        );
      })}
    </select>
  );
}

URLベースの言語切り替え

/en/products  → 英語の製品ページ  
/es/products  → スペイン語の製品ページ
/fr/products  → フランス語の製品ページ

このアプローチにより、SEOの向上、各言語版へのダイレクトリンク、共有しやすいローカライズ済みリンクが実現します。

重要な注意

クライアントコンポーネントのみ

すべての言語切り替え用のフックとコンポーネントは、'use client' が指定されたクライアントコンポーネント内でのみ使用する必要があります。

'use client';
import { useSetLocale } from 'gt-next/client';

function LanguageSwitcher() {
  const setLocale = useSetLocale();
  // ... component logic
}

GTProvider の要件

言語切り替えコンポーネントは、<GTProvider> の内部で使用する必要があります。

// ✅ 正しい
<GTProvider>
  <LanguageSwitcher />
</GTProvider>

// ❌ 間違い（プロバイダーの外側）
<LanguageSwitcher />

次のステップ

Middleware Guide - URL ベースの言語ルーティング
Dynamic Content Guide - 実行時のコンテンツ翻訳
APIリファレンス:
- useSetLocale Hook
- <LocaleSelector> Component

利用可能な方法

プログラムによる制御: カスタムコントロール向けのuseSetLocaleフック
プリセットUI: ドロップダウン付きの<LocaleSelector>コンポーネント
カスタムUI: カスタムセレクターを作成するためのuseLocaleSelectorフック
URLベース: URLパス内のlocaleに対応するミドルウェアルーティング

`useSetLocale` フックの使用

useSetLocale フックは、アプリの言語を切り替えるためのクライアントサイドのフックです。

import { useSetLocale } from 'gt-next/client';

export default function MyComponent() {
  const setLocale = useSetLocale();

  return <button onClick={() => setLocale('en')}>言語を設定する</button>;
}

フックが返す関数に、変更したいlocaleを引数として渡すだけです。

`<LocaleSelector>` コンポーネントの使用

<LocaleSelector> コンポーネントは、設定済みの対応ロケールを自動的に表示する、すぐに使えるドロップダウンを提供します。

import { LocaleSelector } from 'gt-next/client';

export default function MyComponent() {
  return <LocaleSelector />;
}

このコンポーネントは自動的に以下を行います:

プロジェクトで設定されたすべての対応ロケールを表示する
ロケールを各言語のネイティブ名称で表示する
切り替え処理を担う
現在の選択状態を保持する

`useLocaleSelector` フックを使う

独自のロケールセレクターコンポーネントを作成する場合は、useLocaleSelector を使用してください。

import { useLocaleSelector } from 'gt-next/client';

function CustomLocaleSelector() {
  const { 
    locale,              // 現在のアクティブなロケール（例: 'en', 'es'）
    locales,             // プロジェクトが対応するロケールの配列（['en', 'es', 'fr']）
    setLocale,           // ロケールを変更する関数（例: setLocale('es')）
    getLocaleProperties  // ロケールの表示用情報を取得する関数
  } = useLocaleSelector();
  
  if (!locales?.length) return null;
  
  return (
    <select 
      value={locale || ''} 
      onChange={(e) => setLocale(e.target.value)}
    >
      {locales.map((loc) => {
        const props = getLocaleProperties(loc);
        return (
          <option key={loc} value={loc}>
            {props.nativeNameWithRegionCode} {/* 例: "English (US)", "Español (ES)" */}
          </option>
        );
      })}
    </select>
  );
}

URLベースの言語切り替え

/en/products  → 英語の製品ページ  
/es/products  → スペイン語の製品ページ
/fr/products  → フランス語の製品ページ

このアプローチにより、SEOの向上、各言語版へのダイレクトリンク、共有しやすいローカライズ済みリンクが実現します。

重要な注意

クライアントコンポーネントのみ

すべての言語切り替え用のフックとコンポーネントは、'use client' が指定されたクライアントコンポーネント内でのみ使用する必要があります。

'use client';
import { useSetLocale } from 'gt-next/client';

function LanguageSwitcher() {
  const setLocale = useSetLocale();
  // ... component logic
}

GTProvider の要件

言語切り替えコンポーネントは、<GTProvider> の内部で使用する必要があります。

// ✅ 正しい
<GTProvider>
  <LanguageSwitcher />
</GTProvider>

// ❌ 間違い（プロバイダーの外側）
<LanguageSwitcher />

次のステップ

Middleware Guide - URL ベースの言語ルーティング
Dynamic Content Guide - 実行時のコンテンツ翻訳
APIリファレンス:
- useSetLocale Hook
- <LocaleSelector> Component

言語の切り替え

利用可能な方法

`useSetLocale` フックの使用

`<LocaleSelector>` コンポーネントの使用

`useLocaleSelector` フックを使う

URLベースの言語切り替え

重要な注意

クライアントコンポーネントのみ

GTProvider の要件

次のステップ

このページについて

言語の切り替え

利用可能な方法

`useSetLocale` フックの使用

`<LocaleSelector>` コンポーネントの使用

`useLocaleSelector` フックを使う

URLベースの言語切り替え

重要な注意

クライアントコンポーネントのみ

GTProvider の要件

次のステップ

このページについて

言語の切り替え

利用可能な方法

`useSetLocale` フックの使用

`<LocaleSelector>` コンポーネントの使用

`useLocaleSelector` フックを使う

URLベースの言語切り替え

重要な注意

クライアントコンポーネントのみ

GTProvider の要件

次のステップ

このページについて

GitHubでスターを付ける

GitHubでスターを付ける

言語の切り替え

このページについて

言語の切り替え

このページについて

言語の切り替え

このページについて

GitHubGitHubでスターを付ける

GitHubGitHubでスターを付ける

GitHubでスターを付ける

GitHubでスターを付ける