使用IP访问Next.js开发服务器出现net::ERR_SSL_PROTOCOL_ERROR的解决方法

以下是几个针对性的解决方法，按优先级尝试：

• 显式指定开发环境的访问地址
  启动项目时通过环境变量直接指定HTTP协议的公网访问地址，覆盖Next.js的自动推断：

  HOST=0.0.0.0 PORT=3000 NEXT_PUBLIC_URL=http://123.x.x.x:3000 npm run dev
  

  这样项目会强制以HTTP协议加载所有资源，避免自动切换到HTTPS。

• 检查项目内的HTTPS强制逻辑
  排查项目里的中间件（middleware.ts/middleware.js）或next.config.js，看是否存在强制跳转HTTPS的代码：

  • 如果中间件里有类似if (!req.url.startsWith('https'))的重定向逻辑，添加对IPv4地址的判断，跳过强制HTTPS；
  • 检查next.config.js中的redirects/rewrites规则，确认没有强制HTTPS的配置。

• 清除浏览器的HSTS缓存
  若之前用该IPv4地址试过HTTPS访问，浏览器可能缓存了HSTS策略，强制后续请求用HTTPS：

  • Chrome：地址栏输入chrome://net-internals/#hsts，在「Delete domain security policies」输入你的IPv4地址并删除；
  • Firefox：地址栏输入about:config，搜索network.stricttransportsecurity.preloadlist并设为false，或者直接清除该站点的所有缓存数据。

• 在next.config.js中明确禁用HTTPS
  在项目根目录的next.config.js中添加server配置，强制使用HTTP：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    server: {
      protocol: 'http',
      hostname: '0.0.0.0',
    },
  };
  
  module.exports = nextConfig;
  

  重启项目后，所有资源会统一以HTTP协议加载。

内容的提问来源于stack exchange，提问作者ThomasH.Allen