サポートされていない言語コードの処理

// i18n.config.ts
export const locales = ['en', 'es', 'fr'];

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { locales } from './i18n.config';

export function middleware(request: NextRequest) {
  // ロジックは次のステップで追加します
}

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { locales } from './i18n.config';

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

  // 1. ルートパスは別途処理する
  // （これは次のレシピ「ユーザーの優先言語の検出」で処理されます）。
  // 今のところ、そのまま通過させます。
  if (pathname === '/') {
    return NextResponse.next();
  }

  // 2. パスから言語コードを抽出する
  const langCode = pathname.split('/')[1];

  // 3. 言語コードがリストにあるかチェックする
  if (locales.includes(langCode)) {
    // 言語が有効なので、リクエストされたページに進む
    return NextResponse.next();
  }

  // 4. 言語が有効でない場合、404ページに書き換える
  // これにより無効なURLはブラウザバーに残ります
  const url = request.nextUrl.clone();
  url.pathname = `/404`; // app/404.tsxファイルがあることを前提としています
  return NextResponse.rewrite(url);
}

// middleware.ts

// ... (上記のミドルウェア関数)

export const config = {
  matcher: [
    // 以下で始まるパスはすべてスキップ：
    // - api (APIルート)
    // - _next/static (静的ファイル)
    // - _next/image (画像最適化ファイル)
    // - favicon.ico (ファビコンファイル)
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};