NextJS多Zone应用路由跳转异常：无法从Blog App跳转到Home App

你的问题核心在于客户端导航（Link/router.push）不会触发服务端rewrites规则，且Next.js在配置basePath后，客户端路由会自动给路径拼接base前缀，导致跳转到Blog App的根路径而非Home App。以下是几个可行的解决思路：

1. 直接使用绝对URL跳转 #

这是最直接的方案，绕过Next.js客户端路由的basePath自动拼接逻辑，直接指定Home App的完整URL：

• 使用Link组件：

  import Link from 'next/link';
  
  <Link href="http://localhost:5001/">回到首页</Link>
  

• 使用router.push：

  import { useRouter } from 'next/router';
  
  const router = useRouter();
  router.push("http://localhost:5001/");
  

2. 封装自定义Link组件统一处理跨Zone跳转 #

如果需要在多处使用跨App跳转，可以封装一个自定义Link组件，自动判断目标路径并处理：

import NextLink from 'next/link';

export default function CrossZoneLink({ href, ...props }) {
  // 针对跳转到Home App根路径的情况，直接使用绝对URL
  if (href === '/') {
    return <a href="http://localhost:5001/" {...props} />;
  }
  // 其他路径仍使用Next.js原生Link，保留basePath逻辑
  return <NextLink href={href} {...props} />;
}

之后项目中用这个CrossZoneLink替代原生Link即可。

3. 服务端重定向配合客户端跳转（备选方案） #

如果不想暴露绝对URL，可以在Blog App中新增一个专门的跳转路径，通过服务端rewrites重定向到Home App：

• 修改next.config.js的rewrites配置：

  rewrites: async () => {
    return [
      {
        source: "/go-home",
        destination: "http://localhost:5001/",
        basePath: false
      }
    ]
  }
  

• 客户端跳转时使用这个路径：

  <Link href="/go-home">回到首页</Link>
  

这种方式会先请求Blog App的/go-home路径，再由服务端重定向到Home App，体验略逊于直接绝对URL跳转。

补充说明 #

你之前配置的rewrites规则只有在浏览器地址栏直接输入/、或刷新页面时才会生效，因为这时候请求会到达服务端，触发rewrites。而客户端导航（Link/router.push）是前端路由，不会走服务端的rewrites逻辑，所以原来的配置无法解决客户端跳转的问题。

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