React+Next.js实现图片上传时next/image域名配置报错如何解决

步骤1：确认环境变量实际生效值 #

首先打印验证process.env.API_STORAGE_DOMAIN的实际取值：你可以在next.config.js中新增一行console.log('存储域名：', process.env.API_STORAGE_DOMAIN)，重启开发服务后查看终端输出。
如果输出为undefined，说明你没有在本地环境配置文件中注入该变量，导致域名配置为空。

步骤2：校验域名配置格式 #

next/image的domains配置仅接受纯主机名，不能携带协议、端口、路径后缀，常见错误配置如http://localhost、localhost:3333都会导致匹配失败。如果你的存储服务端口不是80/443，建议用更灵活的remotePatterns配置。

步骤3：修改配置后必须重启服务 #

next.config.js的所有修改都不会触发热更新，修改完成后必须手动关闭当前开发服务，重新执行npm run dev启动才会生效。

可行配置示例 #

示例1：兼容本地开发的快速配置 #

module.exports = {
  images: {
    // 环境变量不存在时默认兜底本地开发域名
    domains: [process.env.API_STORAGE_DOMAIN || 'localhost']
  }
}

示例2：带端口匹配的精准配置（推荐） #

如果需要限制协议、端口、路径范围，用remotePatterns安全性更高：

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'http',
        hostname: 'localhost',
        port: '3333',
        pathname: '/files/**',
      },
      // 生产环境的存储域名规则可以在这里追加
    ],
  },
}

示例3：正确配置环境变量 #

在项目根目录新建.env.local文件，添加如下内容：

API_STORAGE_DOMAIN=localhost

重启服务后环境变量即可正常读取。

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