Next.js配置rewrites重写URL后Link未跳转至目标外部地址问题

你对Next.js的rewrites功能存在认知偏差，同时配置存在错误：

1. rewrites是服务端层面的请求代理规则，作用是用户访问本站匹配路径时，由Next服务在后台请求目标地址的内容返回给前端，不会修改<Link>组件渲染的href属性，也不会让浏览器地址栏跳转到外部域名。如果你预期点击链接直接跳转到localhost:4000的地址，rewrites本身就不是用来实现这个效果的。
2. 你当前的rewrite规则仅配置了精确匹配/docs单一路径，无法匹配目标路径/docs/intro，即使做代理也无法正常生效。
3. 额外提醒：修改next.config.js或环境变量后必须重启Next服务，配置不会随热更新生效。

根据你的实际需求二选一即可：

方案1：点击链接直接跳转到外部文档地址（浏览器地址栏显示localhost:4000） #

这是你描述的预期效果，两种实现方式任选：

• 无需改next.config，直接在组件中读取环境变量作为Link的跳转目标：

<Link href={process.env.NEXT_PUBLIC_DOCS_URL}>
  <Button className={NavbarClasses.button}>
    <Box color={navWhite ? 'black' : 'white'}>Docs</Box>
  </Button>
</Link>

• 配置路由重定向，修改next.config.js，将rewrites替换为redirects：

module.exports = withPlugins([
  // 其余已有插件配置保持不变
  {
    async redirects() {
      return [
        {
          source: '/docs',
          destination: process.env.NEXT_PUBLIC_DOCS_URL,
          permanent: false, // false为307临时重定向，true为308永久重定向
        }
      ]
    }
  }
])

配置完成后重启服务，访问/docs就会自动跳转到你配置的4000端口文档地址。

方案2：保留本站/docs路径，透明代理外部文档内容（浏览器地址栏保持localhost:3000/docs） #

如果需要让用户无感知访问外部部署的文档内容，修正rewrite配置即可：

module.exports = withPlugins([
  // 其余已有插件配置保持不变
  {
    async rewrites() {
      return [
        {
          source: '/docs/:path*',
          destination: `${process.env.NEXT_PUBLIC_DOCS_URL}/:path*`,
        }
      ]
    }
  }
])

配置后所有/docs开头的路径都会被代理到4000端口的对应文档路径，前端Link保持原有href="/docs"的写法即可。

• .env文件中变量赋值不要加多余空格，正确写法为NEXT_PUBLIC_DOCS_URL=http://localhost:4000/docs/intro，多余空格会导致读取到的环境变量携带无效空白字符。
• 所有next.config.js、.env的修改都必须重启Next开发服务、或重新构建生产版本后才能生效，热更新不会加载这部分配置变更。

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