Next.js基于域名路由的多语言翻译URL路由实现方法

你当前遇到的两个极端方案都存在明确缺陷：全站点统一英文slug会损失本地化路径的SEO优势，逐语言创建独立路由文件又会带来极高的长期维护成本。Next.js 本身的路由、国际化配置能力完全可以覆盖这类场景，不需要在两个极端里二选一。

核心实现逻辑 #

整套方案不需要为不同语言的本地化路径重复创建路由文件，核心是通过“统一配置映射+动态路由承接”的模式打通所有链路：

• 首先建立独立的全局路径映射配置文件，把每个逻辑页面ID和对应语言的本地化slug做绑定，所有路径规则统一在这个文件里维护，比如配置结构如下：

  // i18n-path.config.js 全局统一维护所有路径映射关系
  const pageSlugMap = {
    // 键是通用的逻辑页面ID，和具体语言完全解耦
    about: {
      en: "about-us",
      es: "sobre-nosotros"
    },
    privacy: {
      en: "privacy",
      es: "privacidad"
    },
    contact: {
      en: "contact",
      es: "contacto"
    },
    products: {
      en: "products",
      es: "productos"
    }
  }
  

• 在next.config.js里配置多域名识别规则，为每个绑定的独立域名指定对应的默认语言、区域参数。比如英语站域名绑定en语言，西班牙语站域名绑定es语言，框架会自动根据访问的域名识别对应的locale，无需在路径里额外加/en、/es这类语言标识。
• 用单条动态路由承接所有本地化路径，不需要逐语言建静态路由文件。比如在App Router体系下创建app/[localizedSlug]/page.jsx动态路由入口，请求进入时做三层校验：
  1. 根据当前访问域名拿到对应的locale值
  2. 查询全局路径映射表，匹配当前访问路径值在对应locale下关联的逻辑页面ID
  3. 匹配成功则加载通用的页面组件渲染内容，匹配失败直接返回404状态
• 内部跳转统一做反向映射。页面里所有的内部链接不要硬编码路径，统一根据当前locale，从全局映射表里取对应逻辑页面的本地化slug生成跳转地址，从根源上避免不同语言站出现路径跳转错误的问题。

适配场景的行业最佳实践 #

• 充分利用独立域名的天然语言识别属性，不要在路径里叠加冗余的语言层级标识（比如/en/about-us），这类结构既拉长了路径长度，也完全没必要——域名本身已经可以向搜索引擎和用户明确传递语言、区域信息。
• 严格保证单域名下的路径一致性。绑定特定语言的域名下，绝对不要出现跨语言路径可正常访问的情况，比如西班牙语站的域名下，不能让/about-us这个英语路径正常打开内容；这类非当前语言的路径要么直接301重定向到对应的正确本地化路径，要么直接返回404，避免出现重复内容稀释SEO权重。
• 保持路径配置和业务代码的彻底解耦。后续如果新增语言、调整某个页面的本地化翻译slug，只需要修改全局映射配置文件即可，不需要调整路由结构、不需要新建路由文件、不需要改动核心页面组件，从机制上降低长期维护成本。
• 配套适配SEO要求。每个页面渲染时，要根据当前的本地化路径输出对应的canonical标签，指向当前域名下的正确路径；同时在hreflang标签里，把同内容对应的其他语言域名下的本地化路径列全，避免搜索引擎识别错不同语言版本的对应关系。
• 做好缺失翻译的路径兜底。如果某个页面在特定语言下还没有完成本地化翻译，不要直接用通用英文路径凑数，要么返回对应状态码提示，要么按照业务规则跳转到最近可用的语言版本对应页面，不要出现路径能正常打开但内容语言和站点定位不匹配的问题。

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