Next.js项目Docker构建时如何传递环境变量修改next.config.js的BASE_URL

问题1：现有ENV方式是否能覆盖配置？ #

不能。你当前next.config.js中的BASE_URL是硬编码的固定字符串，Next.js读取该配置时会直接使用写死的值，不会自动读取系统环境变量里的同名字段覆盖，所以Dockerfile里设置的ENV不会生效。

正确实现方法 #

两种常用方案可按需选择：

方案1：改造next.config.js读取环境变量（推荐） #

修改next.config.js的env配置段，优先读取系统环境变量，兜底保留原有默认值：

module.exports = {
  // 其余配置保持不变
  env: {
    BASE_URL: process.env.BASE_URL || 'http://xx.xx.xx.xx:8000',
  },
  // 其余配置保持不变
};

注意：如果该BASE_URL需要在前端客户端代码（浏览器侧）中使用，你需要将变量名改为带NEXT_PUBLIC_前缀的格式，即NEXT_PUBLIC_BASE_URL，否则Next.js不会把该变量注入到客户端代码中，只会在Node.js服务端生效。

你的Dockerfile无需额外修改，现有ENV设置在yarn build阶段会被next.config.js正常读取，完成覆盖。

方案2：通过sed命令直接替换配置文件（无需修改原有next.config.js） #

如果你不想改动现有Next.js配置代码，可以在Dockerfile的COPY之后、yarn build之前增加一行替换命令，直接修改next.config.js中的硬编码值：

FROM node:16-alpine3.14

WORKDIR /usr/app

COPY ./package.json ./

RUN yarn install

ENV BASE_URL=http://yy.yyy.yy.yy:80

# Copy all files
COPY ./ ./

# 新增以下行，替换next.config.js中的硬编码BASE_URL
RUN sed -i "s|BASE_URL: 'http://xx.xx.xx.xx:8000'|BASE_URL: '$BASE_URL'|g" next.config.js

RUN yarn build

这种方式适合临时调整、不想改动业务代码的场景，缺点是如果后续本地修改了next.config.js里的默认BASE_URL值，要同步修改Dockerfile里的sed匹配规则，否则会替换失败。

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