# gt-next: General Translation Next.js SDK: 言語の切り替え
URL: https://generaltranslation.com/ja/docs/next/guides/languages.mdx
---
title: 言語の切り替え
description: Next.js アプリで言語を設定し、切り替える方法
---

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

## 利用可能な方法

* **プログラムでの制御**: カスタムコントロール向けの [`useSetLocale`](/docs/next/api/helpers/use-set-locale) フック
* **組み込み UI**: ドロップダウン付きの [`<LocaleSelector>`](/docs/next/api/components/locale-selector) コンポーネント
* **カスタム UI**: カスタムセレクターの構築に使う [`useLocaleSelector`](/docs/next/api/helpers/use-locale-selector) フック
* **URL ベース**: URL パスにロケールを含めるための [ミドルウェアルーティング](/docs/next/guides/middleware)

## `useSetLocale` フックを使う

[`useSetLocale`](/docs/next/api/helpers/use-set-locale) はクライアント側のフックで、アプリの言語を変更できます。

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

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

  return <button onClick={() => setLocale('en')}>ロケールを設定</button>;
}
```

フックが返す関数の引数に、切り替え先のロケールを指定するだけです。


## `<LocaleSelector>` コンポーネントを使う

[`<LocaleSelector>`](/docs/next/api/components/locale-selector) コンポーネントは、設定済みのすべてのロケールを自動的に表示する、すぐに使えるドロップダウンを提供します。

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

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

このコンポーネントは自動的に次の処理を行います。

* プロジェクトで設定されているすべてのロケールを表示します
* 各ロケールをその言語のネイティブ表記で表示します
* 切り替え処理を担います
* 現在の選択状態を保持します


## `useLocaleSelector` フックの使用

独自のロケールセレクターコンポーネントを作成する場合は、[`useLocaleSelector`](/docs/next/api/helpers/use-locale-selector) を使用します。

```tsx
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 にロケールを含めることができます。この方法の詳細は、[ミドルウェアガイド](/docs/next/guides/middleware) を参照してください。

```
/en/products  → English products page  
/es/products  → Spanish products page
/fr/products  → French products page
```

このアプローチには、SEO 上の利点に加え、各言語版への直接リンクや共有しやすいローカライズ済みリンクがあります。


## 重要な注意点

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

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

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

function LanguageSwitcher() {
  const setLocale = useSetLocale();
  // ... コンポーネントのロジック
}
```


### GTProvider が必要です

言語切り替えコンポーネントは、[`<GTProvider>`](/docs/next/api/components/gtprovider) 内で使用する必要があります。

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

// ❌ 誤り - プロバイダーの外側
<LanguageSwitcher />
```


## 次のステップ

* [ミドルウェアガイド](/docs/next/guides/middleware) - URL ベースの言語ルーティング
* [動的コンテンツガイド](/docs/next/guides/dynamic-content) - runtime でのコンテンツ翻訳
* API リファレンス:
  * [`useSetLocale` フック](/docs/next/api/helpers/use-set-locale)
  * [`<LocaleSelector>` コンポーネント](/docs/next/api/components/locale-selector)