Nx Monorepo中Next.js引用React组件库背景图片404问题

首先明确：组件库ui-lib的public目录资源不会被nx serve app1自动合并并提供服务，这就是背景图404的核心原因。

问题原因 #

• Nx默认不会自动将库项目的public资源同步到应用项目的public目录，也不会在开发服务中代理这些资源。
• Next.js的静态资源服务仅读取自身项目根目录下的public文件夹，组件库的public资源不在这个服务范围内，因此请求/images/svg/Background.svg会返回404。
• 你使用的Tailwind类bg-[url('/images/svg/Background.svg')]是绝对路径，指向Next.js应用的根public目录，但组件库的图片并没有被放置到该位置。

解决思路 #

方法1：配置Nx任务自动同步资源 #

在ui-lib的project.json中添加资源复制任务，并让app1的serve任务依赖该任务：

1. 给ui-lib添加copy-assets任务：

"copy-assets": {
  "executor": "nx:run-commands",
  "options": {
    "command": "cp -r libs/ui-lib/public/* apps/app1/public/"
  }
}

2. 修改app1的serve任务，添加依赖：

"serve": {
  "executor": "@nrwl/next:server",
  "options": {
    // 原有的serve配置
  },
  "dependsOn": ["ui-lib:copy-assets"]
}

之后启动nx serve app1时，会自动将组件库的public资源复制到app1的public目录，图片即可正常访问。

方法2：在组件中导入资源（推荐） #

放弃绝对路径引用，改为在组件中直接导入图片资源，让Nx自动处理资源路径：

// 在ui-lib的组件文件中
import BackgroundSvg from '../public/images/svg/Background.svg';

export const MyComponent = () => {
  return <div className={`bg-[url(${BackgroundSvg})]`}></div>;
};

这种方式下，Nx会在构建或开发时将图片复制到正确的输出目录，并生成适配的URL，无需手动同步资源。

方法3：配置库的assets构建规则 #

在ui-lib的project.json中配置assets字段，让构建时将public资源打包到输出目录：

"targets": {
  "build": {
    "executor": "@nrwl/react:rollup",
    "options": {
      "assets": [
        {
          "input": "libs/ui-lib/public",
          "output": "public",
          "glob": "**/*"
        }
      ],
      // 其他构建配置
    }
  }
}

然后确保app1的构建任务依赖ui-lib的build任务，这样生产构建app1时会包含组件库的资源。但开发模式下仍需配合方法1的同步任务，因为nx serve不会自动加载库的assets到开发服务中。

方法4：使用Tailwind自定义背景图 #

在ui-lib的tailwind.config.js中定义统一的背景图类，配合资源同步使用：

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'ui-background': "url('/images/svg/Background.svg')",
      },
    },
  },
};

组件中直接使用bg-ui-background类，同时通过方法1同步资源，既规范了样式类名，也避免了动态路径的问题。

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