NextJS添加Middleware匹配规则后出现ImageError问题求助

1. 调整匹配规则顺序 #

Next.js 中间件按规则顺序从上到下匹配，把排除静态资源的规则放在最前面，避免被/partner/:path*覆盖：

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico|auth/login).*)',
    '/partner/:path*'
  ]
}

2. 完善排除规则覆盖所有图片请求 #

有些图片请求可能不是/_next/image开头（比如直接访问的静态图片），或带查询参数，补充规则覆盖这类场景：

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico|auth/login|.*\\.(png|jpg|jpeg|gif|svg|webp)$).*)',
    '/partner/:path*'
  ]
}

3. 检查中间件内部逻辑 #

别让中间件干扰静态图片请求：

• 对匹配到排除路径的请求，直接return NextResponse.next()放行，不要加任何额外逻辑
• 不要修改请求头里的accept、host字段，也别对图片请求做重定向/改写操作

4. 清除缓存重启服务 #

执行以下命令清理Next.js缓存，再重启开发服务：

rm -rf .next
npm run dev

旧缓存可能导致规则不生效，清完大概率能解决偶发问题。

5. 排查具体图片请求 #

打开浏览器控制台，查看报错图片的请求URL：

• 如果是/_next/image开头，确认规则是否真的排除了它
• 如果是其他路径的图片，把对应路径加到排除规则里

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