Next.js 13部署后持续出现WebSocket连接失败问题求助

已尝试操作回顾 #

• 在 next.config.js 中配置实验性参数禁用 WebSocket HMR
• 创建自定义 server.js 启动服务
  但以上操作均未解决部署后出现的错误：

WebSocket connection to '' failed: WebSocket is closed before the connection is established
WebSocket connection to <'URL'> failed: WebSocket is closed before the connection is established.

针对性排查与解决方案 #

1. 强制启用生产环境模式 #

部署时必须确保服务以生产模式启动，自定义 server.js 中依赖 NODE_ENV 判断环境，若服务器未配置该变量，会默认以开发模式运行，触发 HMR 的 WebSocket 连接尝试。

• 启动命令添加环境变量：

  NODE_ENV=production node server.js
  

• 或在服务器系统环境变量中全局配置 NODE_ENV=production

2. 更新 Next.js 相关配置 #

• 替换无效的实验性配置：disableWebpackHMR 在部分 Next.js 13 版本中已失效，改用 webpackDevMiddleware 关闭热更新：

  // next.config.js
  module.exports = {
    webpackDevMiddleware: config => {
      config.hot = false;
      return config;
    },
  };
  

• 若使用 App Router，添加 Webpack fallback 配置避免 Node.js 模块导致的异常：

  // next.config.js
  module.exports = {
    webpack: (config) => {
      config.resolve.fallback = { fs: false, net: false, tls: false };
      return config;
    },
  };
  

3. 检查反向代理/防火墙规则 #

若使用 Nginx、Apache 等反向代理，需确保正确转发 WebSocket 协议：

• Nginx 配置示例：

  location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
  }
  

• 检查服务器防火墙/安全组，确认未阻止 WebSocket 相关请求（默认使用 HTTP/HTTPS 端口 80/443）

4. 排查第三方依赖的 WebSocket 配置 #

若项目中使用了实时通信类依赖（如 Socket.io、Pusher），确认其生产环境配置指向正确的服务器地址，而非本地开发地址。

5. 移除自定义 Server 尝试官方启动方式 #

Next.js 13 生产环境推荐使用官方命令启动，自定义 Server 可能覆盖默认生产配置：

next build && next start

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