言語の変更
Next.jsアプリの言語を変更する方法
概要
このガイドでは、Next.jsアプリの言語を変更する方法を説明します。
まだgt-nextでアプリをセットアップしていない場合は、続行する前にクイックスタートガイドを参照してください。
gt-nextを使用してアプリの言語を変更する方法は3つあります。
useSetLocale()フックを使用する<LocaleSelector>コンポーネントを使用するuseLocaleSelector()フックを使用する- ミドルウェアi18nルーティングを使用する
このガイドでは最初の3つの方法について説明します。ミドルウェアを使用してアプリの言語を変更する方法の詳細については、ミドルウェアルーティングガイドを参照してください。
useSetLocale フックの使用
useSetLocale フックは、アプリの言語を変更できるクライアントサイドフックです。GTProvider コンポーネント内で使用する必要があります。
} from 'gt-next/client';
export default function MyComponent() {
const setLocale = useSetLocale();
return <button onClick={() => setLocale('en')}>Set Locale</button>;
}useSetLocale フックから返されるコールバック関数の引数として、変更したいロケールを指定するだけです。
<LocaleSelector> コンポーネントの使い方
<LocaleSelector> コンポーネントは、アプリの言語を変更できるクライアントサイドのコンポーネントです。これは GTProvider コンポーネント内で使用する必要があります。
このコンポーネントは、プロジェクトで有効にしているすべてのロケールを表示し、ユーザーが別のロケールを選択できるシンプルなUIドロップダウンです。
import { LocaleSelector } from 'gt-next/client';
export default function MyComponent() {
return <LocaleSelector />;
}useLocaleSelector フックの使用
または、独自のロケールセレクターコンポーネントを作成したい場合は、useLocaleSelector フックを使用できます。
このフックは、現在のロケール、プロジェクトがサポートするロケールのリスト、および useSetLocale フックを返します。
以下は、useLocaleSelector フックを使用してカスタムロケールセレクターコンポーネントを作成する方法の例です。
import { useLocaleSelector, useGTClass } from 'gt-next/client';
function capitalizeLanguageName(language: string): string {
if (!language) return '';
return (
language.charAt(0).toUpperCase() +
(language.length > 1 ? language.slice(1) : '')
);
}
export default function LocaleDropdown({ className }: { className?: string }) {
// Retrieve the locale, locales, and setLocale function
const { locale, locales, setLocale } = useLocaleSelector();
const getLocaleProperties = useGTClass().getLocaleProperties;
// Helper function to get the display name of a locale
const getDisplayName = (locale: string) => {
return capitalizeLanguageName(
getLocaleProperties(locale).nativeNameWithRegionCode
);
};
// If no locales are returned, just render nothing or handle gracefully
if (!locales || locales.length === 0 || !setLocale) {
return null;
}
return (
<Select onValueChange={setLocale} defaultValue={locale}>
<SelectTrigger>
<SelectValue placeholder='Select language' />
</SelectTrigger>
<SelectContent className='z-[200!important]' position='popper'>
<SelectGroup>
{!locale && <SelectItem value='' />}
{locales.map((locale) => (
<SelectItem key={locale} value={locale} suppressHydrationWarning>
{getDisplayName(locale)}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
);
}詳細については、APIリファレンスを参照してください。
次のステップ
useSetLocaleフックについて詳しく学ぶ。<LocaleSelector>コンポーネントについて詳しく学ぶ。useLocaleSelectorフックについて詳しく学ぶ。- ミドルウェアによるi18nルーティング について詳しく学ぶ。
このガイドはいかがですか？