如何修改Monorepo中Next.js应用的公共资源目录

你的Monorepo目录结构如下：

apps/
  web/
    - next.config.js
    - pages/
public/

要让位于apps/web/的Next.js应用从Monorepo根目录的public/文件夹加载静态资源，只需修改apps/web/next.config.js文件，添加自定义公共目录配置即可：

方法（Next.js 11+ 推荐） #

Next.js 11及以上版本支持直接通过publicDir配置项指定自定义公共文件夹路径，步骤如下：

1. 打开apps/web/next.config.js
2. 添加publicDir配置，使用Node.js的path模块解析根目录的public路径：

const path = require('path');

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 指定Monorepo根目录下的public文件夹
  publicDir: path.resolve(__dirname, '../../public'),
  // 保留你原有的其他配置项
};

module.exports = nextConfig;

配置完成后，Next.js会自动将根目录public/下的静态资源作为应用的公共资源来源，你在代码中引用资源的方式无需改变（比如/logo.png依然对应根目录public/logo.png）。

兼容旧版本Next.js（低于11） #

如果你的Next.js版本低于11，需要通过webpack配置来实现：

const path = require('path');

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    // 将根目录public添加到webpack的资源解析路径中
    config.resolve.modules.push(path.resolve(__dirname, '../../public'));

    // 配置静态资源的加载规则（按需调整）
    if (!isServer) {
      config.module.rules.push({
        test: /\.(png|jpe?g|gif|svg|ico)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'static/assets',
              publicPath: '/static/assets',
            },
          },
        ],
      });
    }

    return config;
  },
};

module.exports = nextConfig;

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