next-translate项目在App Router中实现多域名国际化方案

背景介绍

next-translate是一个为Next.js应用提供国际化支持的轻量级库，它简化了多语言网站的开发流程。在Next.js 13引入App Router架构后，开发者需要调整国际化策略以适应新的路由系统。

问题场景

在将Page Router迁移到App Router的过程中，开发者遇到了多域名国际化配置失效的问题。具体表现为：

1. 每个供应商(vendor)拥有独立域名(如vendor.us、vendor.es等)
2. 每个域名应默认显示对应语言(us域名显示英文，es域名显示西班牙文等)
3. 在App Router下，所有域名都回退到了根配置的defaultLocale，而非各自域名的默认语言

解决方案分析

传统配置方式

在Page Router中，next-translate通过next.config.js的i18n配置可以完美支持多域名国际化：

i18n: {
  locales: ['en', 'es', 'fr'],
  defaultLocale: 'en',
  localeDetection: false,
  domains: [
    {
      domain: "www.vendor.com",
      defaultLocale: "en"
    },
    {
      domain: "www.vendor.fr",
      defaultLocale: "fr"
    },
    {
      domain: "www.vendor.es",
      defaultLocale: "es"
    }
  ]
}

App Router下的调整

在App Router架构下，需要结合Middleware来实现相同的功能。关键点包括：

1. Middleware位置：必须放置在src目录下才能生效
2. 语言检测逻辑：从请求中获取当前语言设置
3. URL重写：确保路由正确处理语言参数

实现代码

import i18n from "@i18n"
import { NextResponse } from "next/server"

export function middleware(request) {
  // 获取当前语言设置，若无则使用默认语言
  const locale = request.nextUrl.locale || i18n.defaultLocale
  
  // 设置语言查询参数
  request.nextUrl.searchParams.set("lang", locale)
  
  // 移除URL中的语言前缀
  request.nextUrl.href = request.nextUrl.href.replace(`/${locale}`, "")
  
  // 重写URL
  return NextResponse.rewrite(request.nextUrl)
}

技术要点

1. Middleware机制：Next.js的Middleware允许在请求到达页面前进行拦截和处理，是实现国际化的理想位置
2. 语言优先级：系统会按照域名默认语言 > 用户偏好 > 根默认语言的顺序确定最终语言
3. URL处理：需要正确处理语言参数和路径，确保路由系统能准确解析

最佳实践建议

1. 统一配置管理：将i18n配置集中管理，便于维护和扩展
2. 测试覆盖：确保各域名下的语言切换功能正常
3. 性能考量：Middleware会增加少量开销，应保持逻辑简洁
4. 渐进迁移：对于大型项目，可采用混合路由模式逐步迁移

总结

next-translate在App Router架构下依然能够提供简洁高效的国际化解决方案。通过合理使用Middleware配合i18n配置，开发者可以轻松实现基于域名的多语言支持。相比其他国际化方案，next-translate保持了配置简单、易于集成的特点，是Next.js项目国际化的优选方案。