Next.js多域名国际化下Link组件URL重复问题求助

问题根源 #

这不是Link组件本身的问题，是子域名多语言配置与Next.js路由机制不匹配导致的：

• Next.js Link组件默认会基于当前页面的basePath和locale处理路径，如果你直接传入完整的绝对URL（如https://example.com/games），它会误将这个URL当作相对路径，拼接在当前域名之后，从而出现https://example.com/https://example.com/games这种重复URL。
• 原生a标签由浏览器直接解析，不会触发Next.js的路由处理逻辑，所以不会出现拼接错误，但会导致全页刷新。
• 你的子域名（hi.example.com/fr.example.com）对应不同locale的配置，意味着每个子域对应独立的路由环境，直接传入跨域完整URL会打破Next.js的路由自动匹配逻辑。

解决方案 #

1. 优先使用相对路由路径，让Next.js自动匹配域名 #

不要给Link传入完整绝对URL，改用相对路径（如/games），同时确保next.config.js的国际化配置正确关联子域名：

module.exports = {
  i18n: {
    locales: ['en', 'hi', 'fr'],
    defaultLocale: 'en',
    domains: [
      {
        domain: 'example.com',
        defaultLocale: 'en',
      },
      {
        domain: 'hi.example.com',
        defaultLocale: 'hi',
      },
      {
        domain: 'fr.example.com',
        defaultLocale: 'fr',
      },
    ],
  },
  basePath: '', // 确认保持为空
}

之后使用Link时只需写相对路径：

<Link href="/games">Games</Link>

Next.js会根据当前子域名自动生成对应locale的正确绝对URL，避免重复拼接。

2. 跨域跳转时使用passHref配合原生a标签 #

如果需要跳转到其他子域的完整URL，给Link添加passHref属性并嵌套原生a标签：

<Link href="https://example.com/games" passHref>
  <a>English Games</a>
</Link>

这种场景下Next.js会直接传递href给a标签，由浏览器处理跳转（会触发页面刷新，因为是跨域路由）。

3. 排查手动拼接URL的逻辑 #

• 检查代码中是否存在手动拼接base URL到href的情况（如${process.env.NEXT_PUBLIC_BASE_URL}/games），这类操作会干扰Next.js的路由处理，应直接使用相对路径。
• 确认next.config.js中的basePath确实为空字符串，未被其他配置覆盖。

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