国際化 (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 (
    
      {children}
    
  );
}

src/app/[ロケール]/page.tsx

import { useTranslations } from 'next-intl';

export default function Page() {
  const t = useTranslations();
  return (
    

      
{t('greeting')}
      
{t('farewell')}
    
  );
}

これらのファイルは、翻訳を使用するためのレイアウトとメイン ページを構成します。

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) => {
    const nextLocale = e.target.value;
    startTransition(() => {
      router.replace(`/${nextLocale}`);
    });
  };

  return (
    
      
Change language
      EnglishSpanish
  );
}

このコンポーネントを使用すると、ユーザーはインターフェイス言語を変更できます。

結論

これらの手順により、Next.js アプリケーションで国際化が正常に設定され、英語とスペイン語を切り替える言語スイッチャーが作成されました。これにより、アプリケーションが複数の言語をサポートし、ローカライズされたユーザー エクスペリエンスを提供できるようになります。