Next.js Monorepo切换Zone时资源加载失败（Loading Chunk Error）的解决咨询

兄弟，你这遇到的是Next.js多Zone/微前端场景里挺典型的坑——服务端rewrite能搞定刷新的情况，但客户端路由跳转时，静态资源的路径没匹配上，导致chunk找不到。我帮你捋捋问题出在哪，以及具体怎么解决：

为啥会出现这问题？ #

当你用客户端路由点/customer/testing跳转时，Next.js的客户端运行时是基于当前主项目的域名和路径来计算静态资源地址的，直接就去请求https://localhost:5206/_next/static/...了，但你的Customer Zone静态资源实际在localhost:5216/_next/static啊！客户端根本不知道你服务端配了rewrite规则，自然找不到对应的chunk文件。

而刷新页面的时候，是服务端接收到整个请求，通过你配的/customer-static/_next/:path*规则把资源请求转发到5216端口，所以资源就能正常加载了。

具体怎么修？ #

1. 先给Customer Zone加basePath配置 #

到Customer项目的next.config.ts里，加上basePath，让它自己知道静态资源的路径前缀：

// Customer项目的next.config.ts
const nextConfig = {
  basePath: '/customer-static',
  // 你原来的其他配置不变...
}
export default nextConfig;

这样Customer项目在开发或打包时，所有静态资源（chunk js、css这些）的路径都会自动带上/customer-static/_next/...的前缀，刚好和你rewrite规则里的路径对应上。

2. 优化主项目的rewrite规则 #

把你原来的rewrite规则调整得更严谨，确保所有Customer相关的资源请求都能被正确转发：

// 主项目的next.config.ts
async rewrites() {
  return [
    // 处理页面路由
    {
      source: '/customer/:path*',
      destination: 'https://localhost:5216/customer/:path*',
    },
    // 处理静态资源请求，和Customer项目的basePath对应
    {
      source: '/customer-static/_next/:path*',
      destination: 'https://localhost:5216/_next/:path*',
    },
    // 其他你原来的规则...
  ];
}

3. 让客户端跳转时感知到资源路径 #

如果加了上面的配置还是没好，你可以给Link组件加上shallow: false，强制触发服务端导航——这样跳转时服务端会先处理请求，把资源路径转对：

// 主项目里的跳转链接这么写
import Link from 'next/link';

<Link href="/customer/testing" shallow={false}>
  跳转到Customer测试页
</Link>

shallow: false会让跳转走服务端渲染流程，服务端的rewrite规则就会生效，页面加载时就会用正确的资源地址了。

验证小技巧 #

改完之后可以这么验证：

• 启动Customer项目，打开它的静态资源地址，看是不是已经带上/customer-static/_next/...的前缀了
• 用客户端路由跳转后，打开开发者工具的Network面板，看chunk js和css的请求地址是不是/customer-static/_next/...，并且被正确转发到5216端口
• 确认主项目的rewrite规则里，/customer-static/_next/:path*确实指向了Customer项目的端口

内容来源于stack exchange