Caddy Server无法加载Next.js 13静态图片，报ERR_SSL_WRONG_VERSION_NUMBER错误

问题分析 #

该错误核心是协议匹配异常：Caddy默认自动配置HTTPS（内置Let's Encrypt证书处理），但反向代理请求到Next.js的HTTP端口时，Next.js无法识别原始请求的HTTPS上下文，导致静态资源URL生成逻辑混乱，触发SSL握手版本不兼容错误。

解决方案 #

1. 更新Caddy反向代理配置，传递请求协议头 #

修改Caddyfile，添加必要的头信息，让Next.js知晓用户实际使用的协议：

my-domain.com {
    reverse_proxy http://localhost:3000 {
        header_up X-Forwarded-Proto {scheme}
        header_up X-Forwarded-For {remote_host}
    }
}

• X-Forwarded-Proto：告知Next.js原始请求为HTTPS，避免生成HTTP协议的静态资源URL
• X-Forwarded-For：传递客户端真实IP（可选，优化日志与安全校验）

2. 配置Next.js信任反向代理 #

在项目根目录的next.config.js中开启反向代理信任，允许Next.js使用Caddy传递的头信息：

/** @type {import('next').NextConfig} */
const nextConfig = {
  trustProxy: true,
  // 若使用独立部署模式（output: 'standalone'），保留原有配置即可
}

module.exports = nextConfig

3. 确认Next.js服务启动模式 #

确保Next.js以默认HTTP模式启动（端口3000），无需自行配置HTTPS。所有SSL逻辑交由Caddy统一处理，避免协议层冲突。

4. 重启服务生效 #

• 重启Caddy：caddy reload
• 重启Next.js服务，加载新配置

验证 #

访问https://my-domain.com，检查静态图片是否正常加载，查看Next.js日志是否不再出现SSL版本错误。

内容的提问来源于stack exchange，提问作者Md Inzamamul Haque