使用Next Image加载外部URL时出现ERR_TLS_CERT_ALTNAME_INVALID错误

问题原因 #

Next.js Image组件在服务端处理图片优化时，会向images.domain.com发起fetch请求。由于你的自定义子域名直接CNAME指向AWS S3存储桶，S3返回的SSL证书仅包含AWS官方的S3相关域名（如s3-us-west-1.amazonaws.com），不匹配images.domain.com，导致服务端请求触发TLS证书验证失败。而普通<img>标签由客户端浏览器直接请求，不受服务端证书验证逻辑影响，因此可以正常加载。

解决方案 #

1. 用CloudFront分发S3内容并绑定自定义域名（推荐生产环境） #

这是合规且能保留Next.js Image优化功能的标准方案：

• 在AWS创建CloudFront分发，将源设置为你的S3存储桶
• 在AWS Certificate Manager（ACM，需在us-east-1区域申请）为images.domain.com申请SSL证书
• 配置CloudFront分发的备用域名（CNAME）为images.domain.com，并关联上述证书
• 修改DNS记录，将images.domain.com的CNAME指向CloudFront分发域名
• 确保next.config.js中的remotePatterns配置保持现有正确状态

完成后，服务端请求images.domain.com时会获取到匹配该域名的SSL证书，证书验证通过，Image组件即可正常工作。

2. 禁用Image组件的服务端优化（快速临时方案） #

如果不需要服务端图片优化功能，可在Image组件中添加unoptimized={true}属性，跳过服务端fetch流程，改为客户端直接加载：

import Image from 'next/image';

export default function YourComponent() {
  return (
    <Image
      src="https://images.domain.com/your-image-path.jpg"
      alt="图片描述"
      width={600}
      height={400}
      unoptimized={true}
    />
  );
}

3. 本地开发临时忽略证书验证（不推荐生产） #

仅适用于本地测试场景，通过修改配置跳过证书验证：
在next.config.js中添加：

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.domain.com',
      },
    ],
  },
  // 仅本地开发时忽略TLS证书验证
  async serverMiddleware() {
    if (process.env.NODE_ENV === 'development') {
      const https = require('https');
      https.globalAgent.options.rejectUnauthorized = false;
    }
  },
};

注意：此方法会降低本地开发环境的安全性，请勿在生产环境使用。

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