如何无需重复构建Docker镜像，按环境变量调整Next.js配置？

核心思路是绕开next.config.js构建时固化的限制，通过启动时动态生成配置或运行时自定义图片加载逻辑实现单镜像多环境适配，不用重复构建。

方案一：Docker启动时动态生成next.config.js #

利用Docker容器启动前执行脚本的特性，根据环境变量实时生成符合当前环境的配置文件：

1. 把原next.config.js改成模板文件next.config.template.js，用环境变量作为配置来源：

module.exports = {
  images: {
    remotePatterns: JSON.parse(process.env.IMAGE_REMOTE_PATTERNS || '[]'),
  },
  // 保留其他原有配置...
};

2. 编写启动脚本start.sh，放在项目根目录：

#!/bin/sh
# 用环境变量替换模板中的占位，生成最终的next.config.js
envsubst < next.config.template.js > next.config.js
# 启动Next.js服务
npm start

3. 修改Dockerfile，让容器启动时执行这个脚本：

# 省略你的构建阶段代码...
COPY start.sh /app/start.sh
RUN chmod +x /app/start.sh
# 替换原来的CMD为执行脚本
CMD ["/app/start.sh"]

4. 部署时给不同环境传对应配置：

• 预发布环境：设置环境变量IMAGE_REMOTE_PATTERNS='[{"protocol":"https","hostname":"pre.your-domain.com"}]'
• 生产环境：设置环境变量IMAGE_REMOTE_PATTERNS='[{"protocol":"https","hostname":"prod.your-domain.com"}]'

方案二：用运行时自定义图片加载器替代构建时配置 #

放弃next.config.js里的images.remotePatterns，改用Next.js的自定义图片加载逻辑，在运行时根据环境变量校验允许的域名：

1. 新建自定义图片组件components/CustomImage.js：

import Image from 'next/image';

// 从环境变量读取允许的域名列表
const allowedHosts = (process.env.ALLOWED_IMAGE_HOSTS || '').split(',');

const customLoader = ({ src, width, quality }) => {
  // 校验图片域名是否在允许列表内
  const url = new URL(src);
  if (!allowedHosts.includes(url.hostname)) {
    throw new Error(`图片域名 ${url.hostname} 未被允许`);
  }
  // 返回优化后的图片地址（和Next.js默认逻辑一致）
  return `${src}?w=${width}&q=${quality || 75}`;
};

export default function CustomImage(props) {
  return <Image loader={customLoader} {...props} />;
}

2. 替换项目中所有<Image>组件为<CustomImage>：

// 原来的写法
import Image from 'next/image';

// 改成
import CustomImage from '@/components/CustomImage';

3. 部署时给不同环境设置允许的域名：

• 预发布环境：ALLOWED_IMAGE_HOSTS="pre.your-domain.com"
• 生产环境：ALLOWED_IMAGE_HOSTS="prod.your-domain.com"

注意事项 #

• 方案一中，确保next.config.template.js被复制到Docker镜像中，且envsubst工具已安装（大部分Linux基础镜像自带）。
• 方案二中，若使用Next.js的Image Optimization功能，需确保服务器能访问配置的图片域名；同时做好错误捕获，避免非法图片导致页面崩溃。

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