言語の変更

概要

このガイドでは、Next.jsアプリの言語を変更する方法を説明します。

まだgt-nextでアプリをセットアップしていない場合は、続行する前にセットアップガイドを参照してください。

セットアップ

gt-nextを使用してアプリの言語を変更する方法は3つあります。

1. useSetLocale()フックを使用する
2. <LocaleSelector>コンポーネントを使用する
3. useLocaleSelector()フックを使用する

このガイドでは、これら3つの方法すべてについて説明します。

useSetLocale フックの使用

useSetLocale フックは、アプリの言語を変更できるクライアントサイドのフックです。これは GTProvider コンポーネント内で使用する必要があります。

import { useSetLocale } from 'gt-next/client';
export default function MyComponent() {
  const setLocale = useSetLocale();
 
  return <button onClick={() => setLocale('en')}>Set Locale</button>;
}

useSetLocale フックから返されるコールバック関数の引数として、変更したいロケールを指定するだけです。

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

<LocaleSelector> コンポーネントは、アプリの言語を変更できるようにするクライアントサイドコンポーネントです。これは GTProvider コンポーネント内で使用する必要があります。

これは、プロジェクトで有効にしたすべてのロケールを表示し、ユーザーが異なるロケールを選択できるようにする最小限のUI ドロップダウンです。

'use client';
import { LocaleSelector } from 'gt-next/client';
 
export default function MyComponent() {
  return <LocaleSelector />;
}

useLocaleSelector フックの使用

あるいは、独自のロケールセレクターコンポーネントを作成したい場合は、useLocaleSelector フックを使用できます。

このフックは、現在のロケール、ロケールのリスト、および useSetLocale フックを返します。

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

詳細については、APIリファレンスを参照してください。

次のステップ

• useSetLocaleフックについて詳しく学ぶ。
• <LocaleSelector>コンポーネントについて詳しく学ぶ。
• useLocaleSelectorフックについて詳しく学ぶ。