# gt-next: General Translation Next.js SDK: LocaleSelector
URL: https://generaltranslation.com/ja/docs/next/api/components/locale-selector.mdx
---
title: LocaleSelector
description: LocaleSelector コンポーネントの API リファレンス
---

{/* 自動生成: 直接編集せず、代わりに content/docs-templates/ 内のテンプレートを編集してください。 */}


## 概要

`<LocaleSelector>` コンポーネントは、ユーザーのロケールを選択するためのコンポーネントです。
クライアントサイドで動作し、ロケールを選択するためのドロップダウンを提供します。

## リファレンス

### 戻り値

ユーザーがロケールを選択するためのコンポーネントです。

### Props

* **`locales`** (省略可) : `string[]`
  * ドロップダウンに表示するロケールの一覧を指定する省略可能なリストです (例: `['en', 'es-MX', 'fr']`) 。指定しない場合は、`<GTProvider>` コンテキスト内のロケール一覧が使用されます。
* **`customNames`** (省略可) : `{[locale: string]: string}`
  * ロケールコードをカスタムの表示名に対応付けるための省略可能なオブジェクトです。
  * 例: `{{ 'en-US': 'English (United States)', 'es': 'Español' }}`

## 例

### 基本的な使い方

```jsx
import { LocaleSelector } from 'gt-next';

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


### `customNames` の使用

```jsx
import { LocaleSelector } from 'gt-next';

export default function MyComponent() {
  const myCustomNames = {
    en: 'English',
    es: 'Español',
    'fr-CA': 'Français (Canada)',
  };
  return <LocaleSelector customNames={myCustomNames} />;
}
```

***


## 注意事項

* `<LocaleSelector>` コンポーネントを使用すると、アプリのロケールを別のものに切り替えられます。
* `<LocaleSelector>` コンポーネントはサーバーコンポーネントでは使用できません。

## 次のステップ

* [`useLocale`](/docs/next/api/helpers/use-locale) フックの詳細については、こちらを参照してください。
* カスタムのロケールセレクターを定義するには、[`useLocaleSelector`](/docs/next/api/helpers/use-locale-selector) フックを参照してください。
* [ロケール文字列](/docs/core/locales) の詳細については、こちらを参照してください。