Next.js middleware.ts与_app.tsx重复执行问题求助

核心原因分为两部分： #

• React Strict Mode 导致客户端组件重复渲染
  Next.js开发模式（next dev）默认开启React Strict Mode，这个模式会在开发环境下重复调用组件的渲染逻辑、useEffect等函数，目的是帮你排查组件里的副作用问题（比如未清理的定时器、重复订阅）。这种重复渲染只在开发阶段出现，生产模式会自动消失。

• 开发模式下Next.js内部请求触发中间件两次执行
  在开发模式中，Next.js的开发服务器会处理两次请求：一次是浏览器发起的页面主请求，另一次是服务器内部为了支持Fast Refresh或Strict Mode发起的额外请求（比如页面预验证）。这两次请求都会经过中间件，所以服务器终端会看到两次日志，而浏览器端只会显示一次页面请求的记录。

另外你代码里的模块级counter是常驻服务器内存的，所以每次进入页面会触发两次中间件执行，计数器自然加2。

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