Next.js中多next.config.js配置文件的处理方法咨询

方法1：通过环境变量动态加载不同配置 #

直接在默认的next.config.js里做个“中转”，根据环境变量导入对应的配置文件：

// next.config.js
// 读取环境变量，默认用开发环境配置
const env = process.env.BUILD_ENV || 'development';
// 导入对应环境的配置文件
const envConfig = require(`./next.config.${env}.js`);

module.exports = envConfig;

然后在package.json里定义不同环境的构建脚本：

{
  "scripts": {
    "build:dev": "BUILD_ENV=development next build",
    "build:prod": "BUILD_ENV=production next build",
    "build:static": "BUILD_ENV=static next build"
  }
}

运行的时候直接用npm run build:prod，就会自动加载next.config.production.js的配置。要是用Windows系统，需要用set命令或者装cross-env包实现跨平台兼容，比如：

{
  "scripts": {
    "build:prod": "cross-env BUILD_ENV=production next build"
  }
}

方法2：用脚本动态替换配置文件 #

写个简单的脚本，构建前把目标配置文件复制成默认的next.config.js，比如用Node脚本：

// switch-config.js
const fs = require('fs');
const target = process.argv[2];

if (!target) {
  console.error('得指定配置文件，比如：node switch-config.js next.config.production.js');
  process.exit(1);
}

// 复制目标文件覆盖默认配置
fs.copyFileSync(target, './next.config.js');

然后在package.json里加对应的脚本：

{
  "scripts": {
    "build:prod": "node switch-config.js next.config.production.js && next build"
  }
}

执行npm run build:prod就会先替换配置文件，再执行构建。

方法3：直接在主配置里根据环境动态调整（推荐） #

如果只是部分配置项有差异，没必要拆分整个文件，直接在next.config.js里根据环境变量改配置就行：

// next.config.js
module.exports = {
  reactStrictMode: true,
  // 静态环境用export输出，其他用standalone
  output: process.env.BUILD_ENV === 'static' ? 'export' : 'standalone',
  // 生产环境加basePath
  basePath: process.env.BUILD_ENV === 'production' ? '/prod-app' : '',
  // 其他配置项按需动态设置
};

同样通过npm脚本传递环境变量来切换不同配置逻辑。

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