NextJS搭配ExpressJS搭建自定义服务器时应用级中间件无限调用问题

触发原因 #

• 你当前运行在Next.js的开发模式下，框架默认开启热重载功能，会持续自动向服务器发送/_next/webpack-hmr路径的轮询请求，用于检测代码变更实现自动热更新。
• 你将自定义中间件注册为了全局应用级中间件，所有进入Express服务的请求（包括Next.js内部的热重载请求、静态资源请求、favicon.ico请求等）都会优先触发该中间件，因此即便你没有主动调用自定义接口，这些内部自动发起的请求也会不断触发中间件打印日志。

解决方法 #

方案1：在中间件内过滤Next.js内部专用请求 #

修改自定义中间件逻辑，跳过Next.js内部路径、静态资源、站点图标等非业务请求的触发逻辑，代码示例如下：

const mymiddleware = (req, res, next) => {
  // 过滤不需要触发中间件的请求路径
  if (req.path.startsWith('/_next') || req.path === '/favicon.ico') {
    return next();
  }
  console.log("this is a middleware");
  next();
};

方案2：仅给业务路由绑定中间件 #

取消全局注册中间件的逻辑，只给你自己编写的业务路由挂载该中间件，避免非业务请求触发，修改server.js中的注册逻辑即可：

// 删除原全局注册逻辑 server.use(mymiddleware)
// 给指定业务路由单独挂载中间件
server.use("/users", mymiddleware, user_routes);
server.get("/ok", mymiddleware, (req, res) => {
  res.json({ msg: "Hello World!! 🍔" });
});

补充说明 #

如果项目部署到生产环境，该问题会自动消失，因为生产模式下Next.js不会开启热重载轮询功能，不存在自动发起的内部请求。

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