升级最新Next.js后next/image报错：已配置hostname仍提示未配置

排查关键点及解决方案 #

• 协议不匹配
  你的图片src使用的是http协议，但remotePatterns里配置的是https，这会导致匹配失败。把protocol改成'http'即可：

  images: {
    remotePatterns: [
      {
        protocol: 'http', // 改为http匹配src的协议
        hostname: 'dev.mysite.com',
        pathname: '/images/**',
        port: '3001',
      }
    ] // 补全数组闭合括号
  } // 补全images配置闭合括号
  

• 配置语法错误
  你提供的next.config.js代码存在语法问题：remotePatterns数组缺少闭合的]，整个images配置块也缺少闭合的}。语法错误会直接导致配置不生效，务必补全这些符号保证JS语法正确。

• 重启开发服务器
  修改next.config.js后必须重启Next.js开发服务器，新配置才会被加载。仅刷新页面不会触发配置更新。

• 旧版domains属性的限制
  若使用domains属性，注意domains仅填写主机名（不要带端口），但Next.js对带端口的src兼容性较差，因此更推荐用remotePatterns明确指定端口、协议等规则。

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