Next.js热重载突然失效，WebSocket连接失败问题求助

针对你遇到的热重载失效+WebSocket connection to 'ws://localhost:3000/_next/webpack-hmr' failed报错，以下是几个未尝试过的可行方案：

• 清理Next.js缓存并重启服务
  手动删除项目根目录下的.next文件夹，或者执行命令：

  npx next clean
  

  之后重新启动开发服务：

  npm run dev
  

• 切换HMR为轮询模式
  在next.config.js中添加webpackDevMiddleware配置，用轮询替代WebSocket，避免连接被拦截：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    webpackDevMiddleware: config => {
      config.watchOptions = {
        poll: 1000, // 每秒轮询一次文件变化
        aggregateTimeout: 300,
      };
      return config;
    },
  };
  
  module.exports = nextConfig;
  

  修改后重启开发服务。

• 检查端口占用情况
  确认3000端口未被其他进程占用：

  • Mac/Linux执行：

    lsof -i :3000
    

    找到进程ID后用kill -9 <PID>杀掉进程
  • Windows执行：

    netstat -ano | findstr :3000
    

    找到进程ID后用taskkill /F /PID <PID>杀掉进程
    之后重新启动npm run dev。

• 验证hosts文件配置
  检查本地hosts文件是否正确映射localhost：

  • Windows路径：C:\Windows\System32\drivers\etc\hosts
  • Mac/Linux路径：/etc/hosts
    确保存在一行：127.0.0.1 localhost，若缺失则添加（需要管理员权限编辑）。

• 排查防火墙/代理/浏览器插件干扰

  • 暂时关闭本地防火墙，测试热重载是否恢复
  • 关闭正在运行的VPN、代理工具（如Charles、Fiddler）
  • 切换浏览器无痕模式，或禁用广告拦截、隐私类插件，避免WebSocket连接被阻止

• 调整Next.js版本
  部分版本存在已知的HMR兼容性问题，尝试升级到最新稳定版：

  npm install next@latest
  

  若最新版仍有问题，可降级到已知稳定版本（如13.4.19）：

  npm install next@13.4.19
  

内容的提问来源于stack exchange，提问作者Ted's Projects