Next/Image报unable to verify the first certificate错误，求解决办法

原因分析 #

Next/Image组件在服务端会对图片发起优化请求（比如转码、裁剪），此时使用的是Node.js环境的HTTP客户端，默认会严格验证SSL证书；而原生<img>标签是在浏览器端发起请求，浏览器可能对不完整的证书链有兼容处理，因此两者表现不同。

方法1：全局配置服务端SSL验证（开发环境优先） #

在Next.js项目的服务端入口文件（如pages/_app.js或app/layout.js）顶部添加以下代码，仅在服务端跳过SSL证书验证：

import https from 'https';

// 仅在服务端执行，不影响浏览器端逻辑
if (typeof window === 'undefined') {
  https.globalAgent.options.rejectUnauthorized = false;
}

该配置会让服务端所有HTTPS请求跳过证书验证，包括Next/Image的图片优化请求。

方法2：自定义图片加载器（精准控制） #

如果不想全局修改SSL配置，可以自定义图片加载器，针对图片请求单独配置Agent：

1. 在项目根目录创建my-image-loader.js：

import https from 'https';

// 创建跳过SSL验证的Agent
const agent = new https.Agent({
  rejectUnauthorized: false,
  keepAlive: false,
});

// 覆盖Next.js默认的图片请求逻辑（仅服务端生效）
if (typeof window === 'undefined') {
  // 重写fetch方法，给图片请求带上自定义Agent
  const originalFetch = global.fetch;
  global.fetch = async (url, options) => {
    if (url.startsWith('https://cdn01.site.com')) {
      return originalFetch(url, {
        ...options,
        agent,
      });
    }
    return originalFetch(url, options);
  };
}

// 自定义加载器生成图片URL
export default function customLoader({ src, width, quality }) {
  return `${src}?w=${width}&q=${quality || 75}`;
}

2. 在next.config.js中配置使用该加载器：

module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './my-image-loader.js',
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cdn01.site.com',
      },
    ],
  },
};

方法3：禁用Next/Image优化（快速临时方案） #

如果不需要Next/Image的图片优化特性，可以直接启用unoptimized配置，让组件渲染原生<img>标签：

import Image from 'next/image';

function MyComponent() {
  return (
    <Image
      src="https://cdn01.site.com/your-image-path.jpg"
      alt="描述文本"
      width={600}
      height={400}
      unoptimized // 关键配置，跳过服务端优化
    />
  );
}

此方法会失去Next/Image的响应式适配、自动格式转换等功能，但能快速解决显示问题。

注意事项 #

• 生产环境中跳过SSL验证存在安全风险，优先建议修复CDN的证书问题（比如补充完整的证书链、使用可信CA颁发的证书），而非跳过验证。
• 全局修改SSL配置会影响所有服务端HTTPS请求，若只需针对图片请求，优先选择自定义加载器方案。

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