NX Monorepo Next.js单域名部署Admin面板资源加载异常问题

问题根源 #

Admin面板部署在独立域名时，生成的资源路径（如/_next/static/...、图片/JS路径）为绝对路径。通过主域名/admin访问时，浏览器会直接请求主域名下的这些路径，而原有重写规则仅转发/admin开头的路径，导致资源请求被导向主应用域名，无法加载Admin的专属资源。

解决方案 #

1. 配置Admin应用的basePath

在Admin应用的next.config.js中添加basePath配置，让应用知晓自身运行在/admin子路径下，自动给所有资源路径加上/admin前缀：

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: '/admin',
  // 保留原有其他配置
}

module.exports = nextConfig

2. 修正并简化Vercel重写规则

更新vercel.json，修正域名笔误（原第二个规则的destination域名缺失.vercel），同时简化规则逻辑：

{
  "rewrites": [
    {
      "source": "/admin/:match*",
      "destination": "https://xyz-admin.vercel.app/:match*"
    },
    {
      "source": "/:match*",
      "destination": "https://xyz-main.vercel.app/:match*"
    }
  ]
}

3. 重新部署生效

• 重新部署Admin应用到Vercel，确保basePath配置生效
• 重新部署主域名对应的Vercel项目，让新的重写规则生效

原理说明 #

设置basePath: '/admin'后，Admin应用构建时会将所有资源路径（如/_next/static/css/...）生成为/admin/_next/static/css/...。当用户访问主域名的/admin路径时，这些资源请求会匹配/admin/:match*规则，被转发到xyz-admin.vercel.app/_next/static/css/...，正好对应Admin应用的实际资源路径，从而正确加载CSS、JS和图片。

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