Next.js 12部署网页后出现WebSocket连接失败警告的问题咨询

这个警告的核心原因很明确：Webpack热模块替换（HMR）是本地开发专属功能，生产环境下完全不需要启用，部署时如果没正确切换到生产模式，就会出现客户端尝试连接不存在的HMR WebSocket服务的报错。

下面是具体的解决步骤：

• 确认部署命令正确
  必须先执行生产构建，再启动生产服务：

  # 先构建生产包
  next build
  # 再启动生产服务
  next start
  

  绝对不能用next dev启动生产环境——这个命令是给本地开发用的，会自动开启HMR服务。

• 检查环境变量NODE_ENV
  确保生产环境的NODE_ENV被设置为production。Next.js会根据这个变量自动禁用HMR模块，如果环境变量错误，HMR相关代码会依然运行并尝试建立连接。
  如果是自定义服务器或部署平台，启动服务前手动设置：

  NODE_ENV=production next start
  

• 手动强制禁用HMR（兜底方案）
  如果上面的方法都没解决，直接在next.config.js里移除HMR插件：

  module.exports = {
    webpack: (config, { isServer }) => {
      // 仅在客户端生产环境中移除HMR插件
      if (!isServer && process.env.NODE_ENV === 'production') {
        config.plugins = config.plugins.filter(
          plugin => plugin.constructor.name !== 'HotModuleReplacementPlugin'
        );
      }
      return config;
    }
  };
  

• 排查部署平台配置（针对自搭服务器）
  如果是自己搭建的服务器，确保_next目录的静态资源能被正常访问，但这个警告的核心还是HMR未关闭，优先处理前面几点。

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