Next.js中用next-international自定义区域前缀并保留浏览器语言检测

解决方案步骤 #

要实现自定义区域前缀（英文用/us而非/en）且保留浏览器语言自动检测功能，需要通过自定义语言映射逻辑和调整国际化配置来实现，具体操作如下：

1. 更新middleware.ts配置

修改中间件的语言检测逻辑，将浏览器accept-language头中的en系列语言映射到us区域，同时指定locales为["us", "de"]：

import { createI18nMiddleware } from 'next-international/middleware'
import { NextRequest } from 'next/server'

export const I18nMiddleware = createI18nMiddleware({
  locales: ["us", "de"],
  defaultLocale: "de",
  urlMappingStrategy: "rewriteDefault",
  // 自定义语言检测：将en开头的语言映射到us区域
  localeDetection: (request: NextRequest) => {
    const acceptLanguage = request.headers.get('accept-language')
    if (!acceptLanguage) return undefined

    // 解析accept-language，提取优先语言代码
    const preferredLocales = acceptLanguage.split(',').map(item => {
      const [langCode] = item.trim().split(';')
      return langCode.toLowerCase()
    })

    // 匹配规则：en系列语言对应us，de系列对应de
    for (const lang of preferredLocales) {
      if (lang.startsWith('en')) return 'us'
      if (lang.startsWith('de')) return 'de'
    }

    // 无匹配时返回undefined，将使用默认区域de
    return undefined
  }
})

export default async function middleware(request: NextRequest) {
  return I18nMiddleware(request)
}

// 配置中间件作用范围（排除静态资源和API路径）
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)']
}

2. 关联翻译文件（更新i18n.ts）

将us区域关联到原英文翻译文件，确保/us路径加载英文内容：

import { createI18nClient } from 'next-international/client'

export const {
  useI18n,
  useScopedI18n,
  I18nProviderClient,
  useChangeLocale,
  getLocale
} = createI18nClient({
  // us区域直接导入原英文翻译文件
  us: () => import('./messages/en.json'),
  de: () => import('./messages/de.json')
})

3. 翻译文件结构调整

无需额外新增文件，直接复用原有的en.json即可：

├── messages/
│   ├── en.json  # 原英文翻译内容
│   ├── de.json  # 德文翻译内容

效果验证 #

• 首次访问时，若浏览器首选语言为英文（如en-US/en-GB），会自动重定向到localhost:3000/us
• 浏览器首选语言为德文时，直接进入localhost:3000/
• 手动访问localhost:3000/us加载英文内容，localhost:3000/de会被重写为localhost:3000/（符合rewriteDefault策略）

内容的提问来源于stack exchange，提问作者husky