Next.js中间件多次执行原因排查及配置咨询

你的问题核心是默认情况下Next.js中间件会拦截所有请求（包括页面、API、静态资源如JS/CSS/图片、甚至Next.js内部的/_next/路径请求），所以会多次触发日志。要让它只在需要的路径执行，只需给中间件添加路径匹配配置，同时适配你后续的认证Cookie逻辑需求。

具体配置步骤 #

1. 添加中间件路径匹配规则
   在你的middleware.ts文件中新增config导出项，指定需要拦截的路径，排除静态资源和内部路径：

   import type { NextRequest } from "next/server";
   import { NextResponse } from "next/server";
   
   export function middleware(request: NextRequest) {
     console.log("request", JSON.stringify(request));
     // 后续可在这里添加认证Cookie逻辑，比如检查Cookie是否存在
     // const token = request.cookies.get('auth-token');
     // if (!token) return NextResponse.redirect(new URL('/login', request.url));
     return NextResponse.next();
   }
   
   // 配置匹配规则，只在指定路径触发中间件
   export const config = {
     matcher: [
       // 匹配所有页面路由，排除静态文件和Next.js内部路径
       '/((?!_next/static|_next/image|favicon.ico).*)',
       // 若需同时拦截API路由，可添加：'/api/:path*'
       // 组合规则示例：['/((?!_next/static|_next/image|favicon.ico).*)', '/api/:path*']
     ],
   };
   

2. 规则说明

   • /(?!_next/static|_next/image|favicon.ico).*：通过负向断言排除Next.js静态资源目录、图片资源和网站图标，确保这类请求不会触发中间件。
   • 可根据你的认证需求调整matcher：只需要处理页面路由就用单条规则；需要覆盖API路由就补充/api/:path*。

3. 额外注意事项

   • 开发模式下，Next.js热重载可能导致中间件偶尔重复执行，生产模式下该现象会消失。
   • 实现认证Cookie逻辑时，确保只做必要的检查与响应，避免冗余逻辑触发重复执行。

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