Next.js 12自定义Express服务器热重载失败（无法连接WebSocket）求助

问题场景 #

使用Express搭建Next.js 12自定义服务器后，所有功能正常，但热重载失效，浏览器控制台提示无法连接_next/webpack-hmr对应的WebSocket。已尝试通过http-proxy-middleware配置代理，但问题未解决。

核心原因 #

你的代理配置顺序错误：server.all("*")会匹配所有请求并交给Next.js处理，导致代理中间件从未被执行。此外，代理配置缺少必要的跨域参数，也可能导致WebSocket连接失败。

正确配置方案 #

1. 调整代理与请求处理的顺序 #

将代理中间件注册在server.all("*")之前，确保HMR请求优先被代理处理：

const express = require('express');
const next = require('next');
const { createProxyMiddleware } = require('http-proxy-middleware');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
const port = 3001; // 自定义服务器端口，与Next.js默认3000区分开

app.prepare().then(() => {
  const server = express();

  // 配置HMR WebSocket代理，必须放在server.all("*")之前
  server.use(
    '/_next/webpack-hmr',
    createProxyMiddleware({
      target: 'http://localhost:3000', // Next.js开发服务器默认端口
      ws: true,
      changeOrigin: true,
      logLevel: 'debug' // 可选，用于调试代理请求
    })
  );

  // 处理所有非HMR请求
  server.all('*', (req, res) => {
    return handle(req, res);
  });

  server.listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on localhost:${port} - env ${process.env.NODE_ENV}`);
  });
}).catch((e) => {
  console.error(e);
  process.exit(1);
});

2. 关键配置说明 #

• 代理顺序：Express中间件按注册顺序执行，必须让HMR代理先拦截请求，再交给Next.js处理其他请求。
• ws: true：启用WebSocket代理，确保HMR的WebSocket连接能被正确转发。
• changeOrigin: true：修改请求头的Host字段，避免跨域导致的WebSocket连接失败。
• 端口区分：自定义服务器使用与Next.js默认端口（3000）不同的端口（如3001），避免端口冲突。

3. 额外排查点 #

如果仍未解决，可尝试：

• 检查Next.js是否以开发模式启动：确保next({ dev })中的dev为true（即process.env.NODE_ENV为development）。
• 手动处理WebSocket升级事件（若http-proxy-middleware自动处理失效）：

  const proxy = createProxyMiddleware({
    target: 'http://localhost:3000',
    ws: true,
    changeOrigin: true
  });
  
  server.use('/_next/webpack-hmr', proxy);
  // 手动处理WebSocket升级请求
  server.on('upgrade', (req, socket, head) => {
    if (req.url.startsWith('/_next/webpack-hmr')) {
      proxy.upgrade(req, socket, head);
    }
  });
  

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