Vercel/Next.js子目录挂载docs项目后静态资源404如何解决？

方法一：修改Docs项目的Next.js配置（推荐） #

问题根源是Docs项目生成的静态资源路径为绝对路径（如/_next/static/...），当通过example.com/docs访问时，浏览器会向example.com请求这些资源，而非正确的docs.example.com。通过配置Docs项目的资源前缀和基础路径，可以让资源直接指向Docs域名：

1. 在Docs项目的next.config.js中添加以下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 让Docs项目知道自身挂载在/docs路径下，生成的路由会自动带上/docs前缀
  basePath: '/docs',
  // 指定静态资源的前缀域名，强制浏览器从Docs域名加载资源
  assetPrefix: 'https://docs.example.com/',
}

module.exports = nextConfig

2. 重新部署Docs项目，确保配置生效。

此时访问example.com/docs时，页面内的CSS/JS资源会直接请求https://docs.example.com/_next/...，不会再出现404问题。

方法二：补充Web项目的Vercel重写规则（不推荐） #

如果无法修改Docs项目配置，可以在Web项目的vercel.json中添加针对Docs静态资源的重写规则，但需注意会覆盖Web项目自身的/_next/static资源请求，仅适用于Web项目无自身静态资源冲突的场景：

修改vercel.json为：

{
  "rewrites": [
    {
      "source": "/docs/:match*",
      "destination": "https://docs.example.com/:match*"
    },
    // 转发Docs的静态资源请求到Docs域名
    {
      "source": "/_next/static/:match*",
      "destination": "https://docs.example.com/_next/static/:match*"
    },
    { "source": "/(.*)", "destination": "/" }
  ]
}

重新部署Web项目后，浏览器请求example.com/_next/static/...时会被转发到docs.example.com，解决404问题，但此方法可能导致Web项目自身的静态资源无法加载，需谨慎使用。

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