Next.js 13项目中Middleware未触发，访问/test路径报404求助

1. 确认Middleware的正确位置 #

Next.js 13（App Router）要求Middleware文件必须命名为middleware.ts/middleware.js，且放在项目根目录（和app、public文件夹同级），放在app或test子文件夹里完全不会被框架识别，自然无响应。

2. 配置正确的路径匹配规则 #

如果你的Middleware只需要拦截/test路径，要在文件末尾添加matcher配置，确保请求能被命中：

export const config = {
  matcher: ['/test/:path*'], // 匹配/test及所有子路径
};

如果不写matcher，默认会拦截所有路径，但明确配置能避免不必要的拦截。

3. 修正响应返回的代码写法 #

要返回JSON响应，必须用Next.js提供的NextResponse.json()方法，示例代码如下：

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // 仅对/test路径返回指定JSON
  if (request.nextUrl.pathname.startsWith('/test')) {
    return NextResponse.json({ message: 'hello there' });
  }
  // 其他路径正常放行
  return NextResponse.next();
}

export const config = {
  matcher: ['/test/:path*'],
};

不要用Express风格的res.send()或其他非Next.js原生响应方法，否则不会生效。

4. 重启开发服务器 #

修改Middleware文件或调整位置后，必须重启npm run dev，Next.js的开发服务器不会自动热重载Middleware的配置变更。

5. 排查404问题 #

如果按上述步骤调整后仍返回404，大概率是之前的Middleware完全没触发（位置/文件名错误）。只要Middleware正确拦截请求，会直接返回你定义的JSON，不会走到页面路由的404逻辑。

内容的提问来源于stack exchange，提问作者Q-man