T3 Stack项目中Next.js中间件无法触发的问题求助

1. 优先检查文件名拼写 #

你的中间件文件名是middelware.ts，但Next.js要求根目录下的中间件文件必须命名为middleware.ts（注意是两个'e'：middleware）。拼写错误会导致Next.js完全无法识别该文件，这是触发失败最常见的原因。

2. 修正Matcher与重定向逻辑 #

即使文件名正确，当前代码也存在两处问题：

• Matcher包含重定向目标路径：你的config.matcher包含了/login/:path*，而中间件又重定向到该路径，会导致无限循环。应移除/login/:path*，只匹配需要拦截的路径（比如/products/:path*）。
• 重定向路径错误：new URL("/login/:path*", request.url)中的:path*是Next.js的路径匹配语法，不能直接作为URL路径使用。如果需要跳转到登录页，直接写/login即可；如果要携带原路径作为跳转参数，可修改为：

  return NextResponse.redirect(new URL(`/login?redirect=${request.nextUrl.pathname}`, request.url));
  

修正后的完整代码示例：

// 注意文件名是middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  console.log("middleware calling");
  // 跳转到登录页并携带原路径参数
  return NextResponse.redirect(new URL(`/login?redirect=${request.nextUrl.pathname}`, request.url));
}

export const config = {
  // 仅匹配需要拦截的路径，排除登录页
  matcher: ["/products/:path*"],
};

3. 重启开发服务器 #

Next.js中间件运行在边缘层，修改中间件文件后热更新有时不生效，需要完全停止当前开发服务器（Ctrl+C），重新执行npm run dev启动。

4. 确认Next.js版本兼容性 #

Next.js中间件功能从v12.0.0开始引入，T3 Stack默认使用新版本，但如果你的项目依赖的Next.js版本低于v12，需要升级到符合要求的版本。

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