Next-Intl 项目中基于域名的多语言路由配置问题解析

Next-Intl 是一个用于 Next.js 应用国际化的库，它提供了强大的多语言支持功能。在实际开发中，我们经常会遇到需要根据不同域名来切换语言的场景。本文将深入分析 Next-Intl 中基于域名的多语言路由配置问题及其解决方案。

问题背景

在 Next-Intl 项目中配置多语言路由时，开发者期望通过不同域名自动切换语言环境。例如：

• www.example.com 对应英文(en)
• www.example.de 对应德文(de)

然而，实际配置后发现无论访问哪个域名，系统都默认返回英文环境，无法实现预期的域名自动切换语言功能。

配置分析

典型的域名路由配置如下：

import { defineRouting } from 'next-intl/routing';

export const routing = defineRouting({
  locales: ['en', 'de'],
  defaultLocale: 'en',
  localePrefix: 'as-needed',
  localeDetection: false,
  domains: [
    {
      domain: 'www.example.com',
      defaultLocale: 'en',
      locales: ['en'],
    },
    {
      domain: 'www.example.de',
      defaultLocale: 'de',
    },
  ],
});

问题根源

经过深入排查，发现问题出在服务器代理配置上。当使用 HTTPS 协议时，代理转发请求会携带端口信息：

x-forwarded-host: www.example.de:443

而 Next-Intl 在匹配域名时，会严格比较完整的域名和端口信息。因此，当配置中只写了www.example.de而没有包含端口时，匹配就会失败，导致回退到默认语言。

解决方案

有两种可行的解决方案：

方案一：在路由配置中包含端口信息

domains: [
  {
    domain: 'www.example.com:443',
    defaultLocale: 'en',
    locales: ['en'],
  },
  {
    domain: 'www.example.de:443',
    defaultLocale: 'de',
  },
]

方案二：修改服务器配置

在服务器配置中移除端口转发，确保x-forwarded-host只包含域名部分：

proxy_set_header X-Forwarded-Host $host;

最佳实践建议

1. 一致性原则：确保代理层和应用的域名识别方式保持一致
2. 环境隔离：开发环境和生产环境使用相同的域名处理逻辑
3. 日志调试：在开发阶段打印请求头信息，便于排查匹配问题
4. HTTPS考虑：特别注意443端口的处理，这是HTTPS的默认端口

总结

Next-Intl 的域名路由功能非常强大，但在实际部署时需要特别注意服务器的配置细节。通过本文的分析，开发者可以更好地理解域名匹配机制，避免在多语言路由配置上走弯路。记住，无论是直接在配置中包含端口信息，还是调整服务器配置去除端口，关键是要保持整个请求链路中域名识别的一致性。