Next.js Page Routerで英語圏のユーザーを/enにアクセスさせる

i18n: {
  locales: ['en', 'ja'], // これではアカン
  defaultLocale: 'ja',
}

i18n: {
  locales: ['en', 'en-US', 'ja'],
  defaultLocale: 'ja',
  domains: [
    {
      domain: process.env.NEXT_PUBLIC_ORIGIN,
      defaultLocale: 'ja',
      http: process.env.NODE_ENV === 'development'
    },
    {
      domain: `${process.env.NEXT_PUBLIC_ORIGIN}/en`,
      defaultLocale: 'en-US',
      http: process.env.NODE_ENV === 'development'
    }
  ]
}

import Link from 'next/link'

const Page = () => {
  return (
    <>
      <Link href='/' locale='ja'>
        日本語ページへ
      </Link>

      <br />
      <Link href='/' locale='en'>
        英語ページへ
      </Link>
    </>
  )
}

export default Page

import type { NextRequest } from 'next/server'
import { NextResponse } from 'next/server'

const PUBLIC_FILE = /\.(.*)$/

export function middleware(request: NextRequest) {
  // 静的ファイルやAPI関連のリクエストはスキップ
  if (
    request.nextUrl.pathname.startsWith('/_next') ||
    request.nextUrl.pathname.includes('/api/') ||
    PUBLIC_FILE.test(request.nextUrl.pathname)
  ) {
    return
  }

  const referer = request.headers.get('referer')
  const acceptLanguage = request.headers.get('accept-language')

  // TOPページアクセス時の言語リダイレクト処理
  if (request.nextUrl.pathname === '/') {
    // サイト内遷移の場合はリダイレクトしない
    if (referer?.includes(request.nextUrl.origin)) {
      return NextResponse.next()
    }

    // 英語ブラウザの場合、英語版にリダイレクト
    if (acceptLanguage?.includes('en')) {
      return NextResponse.redirect(new URL('/en', request.url))
    }
  }

  return NextResponse.next()
}

// マッチするパス: トップページと英語以外のパス
export const config = {
  matcher: ['/', '/((?!en).*)']
}

import type { NextRequest } from 'next/server'
import { NextResponse } from 'next/server'

// 対応言語の定義
const LANGUAGES = [
  'en', // English
  'cn', // Chinese (Simplified)
  'tw', // Chinese (Traditional)
  'ko', // Korean
  'th', // Thai
  'fr' // French
] as const
type Language = (typeof LANGUAGES)[number]

// 静的アセット（画像、CSS、JSなど）を判別する正規表現
const PUBLIC_FILE = /\.(.*)$/

export function middleware(request: NextRequest) {
  // 以下のリクエストは言語処理をスキップ：
  // - Next.jsの内部リクエスト（/_next/）
  // - APIリクエスト（/api/）
  // - 静的ファイル（.jpg、.cssなど）
  if (
    request.nextUrl.pathname.startsWith('/_next') ||
    request.nextUrl.pathname.includes('/api/') ||
    PUBLIC_FILE.test(request.nextUrl.pathname)
  ) {
    return NextResponse.next()
  }

  const { pathname, origin } = request.nextUrl
  const referer = request.headers.get('referer')

  // URLが既に言語プレフィックス（/en/、/cn/など）を含む場合はスキップ
  if (LANGUAGES.some((language) => pathname.startsWith(`/${language}`))) {
    return NextResponse.next()
  }

  // サイト内での画面遷移の場合は言語リダイレクトをスキップ
  if (referer?.includes(origin)) {
    return NextResponse.next()
  }

  // ブラウザの言語設定を取得してリダイレクト先を決定
  const acceptLanguage = request.headers.get('accept-language')?.toLowerCase()
  const preferredLanguage = getPreferredLanguage(acceptLanguage)

  // 対応言語が見つかった場合、その言語のパスにリダイレクト
  if (preferredLanguage) {
    return NextResponse.redirect(new URL(`/${preferredLanguage}${pathname}`, request.url), 302)
  }

  return NextResponse.next()
}

const getPreferredLanguage = (acceptLanguage?: string): Language | null => {
  if (!acceptLanguage) return null

  // 中国語のバリエーション（zh-HK等）を簡体字中国語として扱う
  const normalizedLanguage = /^zh(-hk)?$/.test(acceptLanguage) ? 'zh-cn' : acceptLanguage

  // ブラウザの言語設定と対応言語を照合
  return LANGUAGES.find((language) => normalizedLanguage.startsWith(language)) || null
}