ホームページ > 記事 > ウェブフロントエンド > ルーティングを使用した Next.js の国際化ガイド (i)
ルーティングを使用した Next.js の国際化ガイド (i)
- WBOYオリジナル
- 2024-07-17 16:13:27845ブラウズ
国際化 (i18n) は、エンジニアリングを変更せずに、さまざまな言語や地域に簡単に適応できるようにアプリケーションを設計するプロセスです。この記事では、Next.js アプリケーションで i18n を設定し、next-intl を使用して英語とスペイン語を切り替える言語スイッチャーを作成する方法を学びます。
インストール
まず、Next.js での国際化の管理を容易にする next-intl ライブラリをインストールする必要があります。ターミナルで次のコマンドを実行します:
npm install next-intl
プロジェクトの構造
プロジェクトの構造は次のようになります:
├── messages
│ ├── en.json
│ └── es.json
├── next.config.mjs
└── src
├── i18n.ts
├── middleware.ts
└── app
└── [locale]
├── layout.tsx
└── page.tsx
1. 翻訳メッセージの設定
プロジェクトのルートにメッセージ ディレクトリを作成します。このディレクトリ内に、サポートする言語ごとに JSON ファイルを追加します。
メッセージ/en.json
{
"greeting": "Hello Codú",
"farewell": "Goodbye Codú"
}
メッセージ/es.json
{
"greeting": "Hola Codú",
"farewell": "Adiós Codú"
}
これらのファイルには、アプリケーションで使用されるフレーズの翻訳が含まれています。
2. Next.jsの構成
next.config.mjs で国際化をサポートするように Next.js を構成します。
next.config.mjs
import { getRequestConfig } from 'next-intl/server';
// List of supported languages
const locales = ['en', 'es'];
export default getRequestConfig(async ({ locale }) => {
// Validate that the incoming `locale` parameter is valid
if (!locales.includes(locale)) {
return { notFound: true };
}
return {
messages: (await import(`./messages/${locale}.json`)).default
};
});
このファイルは、要求された言語に基づいて正しい翻訳メッセージを読み込むように Next.js を構成します。
3. 国際化ミドルウェア
リダイレクトとデフォルト言語の設定を処理するミドルウェアを作成します。
src/ミドルウェア.ts
import createMiddleware from 'next-intl/middleware';
export default createMiddleware({
// List of all supported languages
locales: ['en', 'es'],
// Default language
defaultLocale: 'en'
});
export const config = {
// Only match internationalised pathnames
matcher: ['/', '/(en|es)/:path*']
};
何も指定されていない場合、このミドルウェアはデフォルト言語へのリダイレクトを処理します。
4. 国際化設定
国際化設定を管理するための構成ファイルを作成します。
src/i18n.ts
import { notFound } from 'next/navigation';
import { getRequestConfig } from 'next-intl/server';
const locales = ['en', 'es'];
export default getRequestConfig(async ({ locale }) => {
if (!locales.includes(locale as any)) notFound();
return {
messages: (await import(`../messages/${locale}.json`)).default
};
});
このファイルはロケールを検証し、対応するメッセージをロードします。
5. レイアウトとページの設定
国際化をサポートするようにレイアウトとメイン ページを構成します。
src/app/[ロケール]/layout.tsx
import { useLocale } from 'next-intl';
import { ReactNode } from 'react';
export default function Layout({ children }: { children: ReactNode }) {
const locale = useLocale();
return (
<html lang={locale}>
<body>{children}</body>
</html>
);
}
src/app/[ロケール]/page.tsx
import { useTranslations } from 'next-intl';
export default function Page() {
const t = useTranslations();
return (
<div>
<h1>{t('greeting')}</h1>
<p>{t('farewell')}</p>
</div>
);
}
これらのファイルは、翻訳を使用するためのレイアウトとメイン ページを構成します。
6. 言語スイッチャーの作成
最後に、英語とスペイン語を切り替える言語スイッチャーを作成します。
src/app/[ロケール]/switcher.tsx
'use client';
import { useLocale } from 'next-intl';
import { useRouter } from 'next/navigation';
import { ChangeEvent, useTransition } from 'react';
export default function LocalSwitcher() {
const [isPending, startTransition] = useTransition();
const router = useRouter();
const localActive = useLocale();
const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
const nextLocale = e.target.value;
startTransition(() => {
router.replace(`/${nextLocale}`);
});
};
return (
<label className='border-2 rounded'>
<p className='sr-only'>Change language</p>
<select
defaultValue={localActive}
className='bg-transparent py-2'
onChange={onSelectChange}
disabled={isPending}
>
<option value='en'>English</option>
<option value='es'>Spanish</option>
</select>
</label>
);
}
このコンポーネントを使用すると、ユーザーはインターフェース言語を変更できます。
結論
これらの手順により、Next.js アプリケーションで国際化が正常に設定され、英語とスペイン語を切り替える言語スイッチャーが作成されました。これにより、アプリケーションで複数の言語をサポートし、ローカライズされたユーザー エクスペリエンスを提供できるようになります。
以上がルーティングを使用した Next.js の国際化ガイド (i)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。