GitHub

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

利用可能な方法

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

`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();
  // ... コンポーネントのロジック
}

GTProvider の要件

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

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

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

次のステップ

Middleware ガイド - URL ベースの言語ルーティング
動的コンテンツガイド - 実行時のコンテンツ翻訳
APIリファレンス:
- useSetLocale フック
- <LocaleSelector> コンポーネント

利用可能な方法

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

`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();
  // ... コンポーネントのロジック
}

GTProvider の要件

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

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

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

次のステップ

Middleware ガイド - URL ベースの言語ルーティング
動的コンテンツガイド - 実行時のコンテンツ翻訳
APIリファレンス:
- useSetLocale フック
- <LocaleSelector> コンポーネント

利用可能な方法

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

`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();
  // ... コンポーネントのロジック
}

GTProvider の要件

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

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

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

次のステップ

Middleware ガイド - URL ベースの言語ルーティング
動的コンテンツガイド - 実行時のコンテンツ翻訳
APIリファレンス:
- useSetLocale フック
- <LocaleSelector> コンポーネント

言語の切り替え

利用可能な方法

`useSetLocale` フックの使用

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

`useLocaleSelector` フックの使用

URL ベースの言語切り替え

重要な注意事項

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

GTProvider の要件

次のステップ

このページについて

言語の切り替え

利用可能な方法

`useSetLocale` フックの使用

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

`useLocaleSelector` フックの使用

URL ベースの言語切り替え

重要な注意事項

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

GTProvider の要件

次のステップ

このページについて

言語の切り替え

利用可能な方法

`useSetLocale` フックの使用

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

`useLocaleSelector` フックの使用

URL ベースの言語切り替え

重要な注意事項

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

GTProvider の要件

次のステップ

このページについて

GitHub でスターする

GitHub でスターする

言語の切り替え

このページについて

言語の切り替え

このページについて

言語の切り替え

このページについて

GitHubGitHub でスターする

GitHubGitHub でスターする

GitHub でスターする

GitHub でスターする