如何在生产环境中让Next.js项目使用HTTP协议

我来帮你搞定这个内网部署的痛点——Next.js在生产环境默认倾向于HTTPS，但私有网络里我们完全可以强制它用HTTP加载所有资源，下面是几个关键步骤：

1. 配置静态资源前缀（核心） #

Next.js会根据部署环境自动推断资源的协议和域名，我们可以在next.config.js里手动指定HTTP的资源前缀，让所有CSS、JS、图片都走HTTP：

module.exports = {
  // 替换成你的内网服务器IP/域名+端口，比如http://192.168.1.100:3000
  assetPrefix: 'http://your-internal-domain-or-ip:port',
  // 如果你的应用部署在子路径下，比如http://xxx/app，就加上下面这行
  // basePath: '/app',
}

这个配置会覆盖Next.js自动生成的资源路径，强制所有静态资源使用你指定的HTTP前缀。

2. 禁用HTTPS自动重定向 #

有些情况下，Next.js的生产服务器会自动把HTTP请求重定向到HTTPS，这时候可以通过环境变量关闭这个行为：

# 启动生产服务器时添加环境变量
NODE_ENV=production NEXT_DISABLE_HTTPS=true next start

如果是用自定义服务器（比如Express），也可以在代码里关闭HTTPS重定向逻辑，确保所有请求都走HTTP。

3. 处理Image组件的协议问题 #

如果你用了Next.js内置的Image组件，它可能会自动启用HTTPS优化，这时候需要调整图片配置：

module.exports = {
  images: {
    unoptimized: true, // 关闭Next.js的图片自动优化，适合内网环境
    domains: ['your-internal-domain-or-ip'], // 允许加载内网域名/IP的图片
  },
}

开启unoptimized后，Image组件会直接使用你指定的HTTP图片URL，不会自动替换协议。如果是手动写<img>标签，确保src是完整的HTTP路径，或者依赖前面配置的assetPrefix来自动拼接。

4. 检查服务器和环境变量配置 #

如果上面的配置还没生效，检查一下服务器的反向代理（比如Nginx）是否强制了HTTPS，或者有没有设置HTTPS=true这类环境变量。确保所有环境变量都没有强制启用HTTPS，比如：

# 确保没有设置这个变量
unset HTTPS

验证效果 #

构建并启动服务器后，打开浏览器的开发者工具，查看网络请求的资源路径——所有CSS、JS、图片都应该是HTTP开头的，没有被自动重定向到HTTPS。

内容的提问来源于stack exchange，提问作者Jang-Ho Bae