NextJS 13 Middleware异常：非指定路径（首页）触发执行问题

可能的原因1：Next.js 13.2.1的Matcher Bug #

Next.js 13.2.1版本的中间件路径匹配器（matcher）存在已知问题，生产环境下会错误触发根路径请求对应的中间件逻辑，而开发环境因编译机制不同未出现该问题。

可能的原因2：Link组件预加载触发 #

如果你的首页使用了Next.js的<Link>组件链接到/contact、/admin或/about，生产环境中<Link>默认开启预加载功能——浏览器在访问首页时会后台预加载这些链接的资源，从而触发中间件执行（开发环境预加载行为默认不生效或存在差异）。

对应解决方案 #

1. 升级Next.js版本
   将Next.js升级到13.2.4及以上版本，官方已在该版本修复了matcher相关的路径匹配bug。

2. 处理预加载请求
   若需保留预加载功能但不想让中间件处理预加载请求，可在中间件中判断请求的预加载标识：

   import { NextResponse } from 'next/server'
   import type { NextRequest } from 'next/server'
   
   export function middleware(request: NextRequest) {
     // 跳过预加载请求
     if (request.nextUrl.searchParams.get('purpose') === 'prefetch') {
       return NextResponse.next()
     }
     console.log(`Runs for '/contact' or '/admin' or 'about'`)
   }
   
   export const config = {
     matcher: ['/contact', '/admin','/about']
   }
   

3. 精确路径匹配
   在matcher规则中添加$符号，确保仅精确匹配目标路径，避免意外的子路径或预加载请求触发：

   export const config = {
     matcher: ['/contact$', '/admin$', '/about$']
   }
   

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