NextJS中next/image配置远程域名后仍报主机名未配置错误如何解决

问题根因 #

你的next.config.js存在两处直接导致配置不生效的问题：

• 配置前半段存在一段非法导出代码：

module.exports = {
  analyticsId: analyticsId,
};

这里的analyticsId变量没有任何地方声明定义，运行时会直接抛出ReferenceError，导致整个配置文件加载失败，NextJS会自动回退到默认配置，你后续写的images.domains完全不会被读取生效。

• 如果你使用的是NextJS 13及以上版本，旧的domains配置已经被标记为废弃，也会出现配置不生效的问题。

修复方案 #

1. 首先删除上述那段冗余的非法导出代码，你后续通过withPlugins导出的配置才是完整的有效配置，前面这段是多余的错误代码。
2. 如果你使用NextJS 12及更早版本，删除错误代码后完全重启开发服务即可生效，注意next.config.js的修改不会热更新，必须手动重启服务。
3. 如果你使用NextJS 13及以上版本，建议将images.domains替换为官方推荐的remotePatterns配置：

images: {
  remotePatterns: [
    {
      protocol: 'https',
      hostname: 'static.mydomain.com',
      pathname: '/**',
    },
  ],
  disableStaticImages: true,
}

4. 确认next-images插件版本和你的NextJS版本兼容，disableStaticImages: true的配置是正确的，用来避免next-images和NextJS内置图片处理能力冲突。

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