Next.js重写规则生效但JS/CSS资源出现404错误求助

问题本质：服务端重写只是转发请求，但子项目（forums.mysite.com）编译生成的HTML中，脚本、样式等资源路径默认是相对自身域名的（比如/_next/static/...）。当页面在主域名mysite.com/topic/下渲染时，浏览器会尝试从mysite.com/_next/static/...加载这些资源，而主项目不存在这些资源，因此返回404。

以下是可行的解决办法：

方案一：给子项目配置assetPrefix和basePath #

修改子项目（forums.mysite.com）的next.config.js，指定资源加载的前缀路径和基础路径，确保浏览器直接从子域名加载资源：

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  // 指定资源加载的完整域名前缀
  assetPrefix: 'https://forums.mysite.com',
  // 匹配主项目重写的路径前缀
  basePath: '/topic',
};

module.exports = nextConfig;

配置后，子项目生成的资源路径会变为https://forums.mysite.com/topic/_next/static/...，浏览器会直接从子域名拉取资源，避免与主项目的资源路径冲突。

方案二：在主项目添加资源路径的重写规则 #

如果不想修改子项目配置，可以在主项目的重写规则中，添加对子项目资源路径的转发，让主域名的资源请求也转发到子域名：

const rewrites = async () => [
  {
    source: "/topic/",
    destination: "https://forums.mysite.com/topic/",
  },
  {
    source: "/topic/:match*",
    destination: "https://forums.mysite.com/topic/:match*",
  },
  // 转发子项目的静态资源请求
  {
    source: "/_next/static/topic/:match*",
    destination: "https://forums.mysite.com/_next/static/topic/:match*",
  },
];

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  rewrites,
};

module.exports = nextConfig;

注意：如果子项目未配置basePath，则资源路径重写规则需要改为source: "/_next/static/:match*"。但这种方式可能会和主项目自身的/_next/static/资源路径冲突，需谨慎使用。

注意事项 #

• 子项目配置basePath后，内部路由（如Link组件、useRouter）需要适配该前缀，避免路由跳转错误。
• 部署子项目时，确保basePath与主项目的重写路径完全匹配，避免路径不一致导致的请求错误。

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