ユーザーの優先言語の検出

問題

ユーザーが初めてアプリケーションのルート(例: /)にアクセスすると、英語などのデフォルト言語が表示されます。これにより、他の言語を話すユーザーにとって即座に摩擦が生じ、ブラウザがすでに優先言語を伝えているにもかかわらず、手動で言語切り替えを探す必要があります。

解決策

ミドルウェアを使用してルートパス(/)へのリクエストをインターセプトします。ユーザーのAccept-Language HTTPヘッダーをチェックして、優先言語を見つけます。その言語がアプリケーションでサポートされている場合、ユーザーをその言語のルート(例: /fr)にリダイレクトします。サポートされていない場合は、デフォルト言語(例: /en)にリダイレクトします。

手順

1. 言語パーサーのインストール

Accept-Languageヘッダーは複雑になる可能性があります(例: fr-CH, fr;q=0.9, en;q=0.8)。小さなライブラリを使用すると、このヘッダーを解析し、サポートされている言語のリストから最適な一致を見つけることができます。

ターミナルで次のコマンドを実行します:

npm install accept-language-parser

2. 言語とデフォルトの定義

サポートされている言語のリストを保存し、デフォルトを定義するための中央設定ファイルを作成します。このデフォルトは、ユーザーのブラウザ設定がサポートしている言語と一致しない場合に使用されます。

// i18n.config.ts

export const locales = ['en', 'es', 'fr'];
export const defaultLocale = 'en';

3. ミドルウェアの作成

プロジェクトのルートにmiddleware.tsファイルを作成します。このファイルは受信リクエストで実行され、パスとヘッダーをチェックできます。

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import parser from 'accept-language-parser';
import { locales, defaultLocale } from './i18n.config';

// Helper function to find the best language match
function getBestLocale(acceptLangHeader: string | null) {
  if (!acceptLangHeader) {
    return defaultLocale;
  }

  // Use the parser to find the best supported language
  const bestMatch = parser.pick(locales, acceptLangHeader, {
    loose: true,
  });

  return bestMatch || defaultLocale;
}

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  // 1. Check if the request is for the root path
  if (pathname === '/') {
    // Get the user's preferred language
    const acceptLang = request.headers.get('Accept-Language');
    const bestLocale = getBestLocale(acceptLang);

    // Redirect to the best-matched language path
    request.nextUrl.pathname = `/${bestLocale}`;
    return NextResponse.redirect(request.nextUrl);
  }

  // 2. For all other paths, continue as normal
  return NextResponse.next();
}

export const config = {
  matcher: [
    // Skip all paths that start with:
    // - api (API routes)
    // - _next/static (static files)
    // - _next/image (image optimization files)
    // - favicon.ico (favicon file)
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

このコードはルートパス(/)に対してのみロジックを実行します。ユーザーが/にアクセスすると、Accept-Languageヘッダーをチェックし、最適な一致(例: es)を見つけて、/esにリダイレクトします。/en/aboutなどの他のすべてのリクエストは、このロジックによって無視され、通過します。