Next.js <Image/>组件出现UNABLE_TO_GET_ISSUE_CERT_LOCALLY错误求助

return (<Image/>)

这个错误核心是本地环境无法验证目标图片域名的SSL证书，即便你已经配置了images.domains白名单，也会因为证书信任问题触发报错。以下是可行的解决方法：

1. 开发环境临时跳过证书验证（仅限开发） #

直接在启动命令中添加环境变量，禁用证书校验：

NODE_TLS_REJECT_UNAUTHORIZED=0 npm run dev

或者在next.config.js中加入环境判断，仅在开发模式下生效：

module.exports = {
  images: {
    domains: ['你的目标域名'], // 确保这里域名拼写正确
  },
  async serverRuntimeConfig() {
    if (process.env.NODE_ENV === 'development') {
      process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
    }
  },
};

⚠️ 注意：生产环境绝对不能用这种方式，会带来安全风险。

2. 导入证书到本地信任存储 #

如果不想禁用验证，可将目标域名的SSL证书添加到本地系统的信任列表：

• Windows：打开「证书管理器」，导入证书并设置为「受信任的根证书颁发机构」
• macOS：双击证书文件，添加到「登录」钥匙串，右键证书选择「显示简介」，将「信任」设置为「始终信任」
• Linux：将证书文件放到/usr/local/share/ca-certificates/目录，执行sudo update-ca-certificates更新证书缓存

3. 检查next.config.js配置有效性 #

确认images.domains中的域名格式正确：

• 不要包含http/https前缀，比如写example.com而不是https://example.com
• 不要带端口号（常规场景只需纯域名）

4. 清理Next.js缓存 #

缓存可能导致配置未生效，删除项目根目录下的.next文件夹，然后重启开发服务。

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