Next.js 14中间件调用NextResponse.next()时遭遇404页面问题

核心排查方向及解决步骤： #

• 确认/dashboard路由实体存在：App Router 要求路由必须对应真实的页面文件，检查项目中是否存在app/dashboard/page.js（或page.tsx）文件，没有的话直接创建即可——这是触发404最常见的原因，和中间件逻辑无关。
• 检查中间件文件位置：中间件必须放在项目根目录（middleware.js）或src目录下（src/middleware.js），放错位置会导致中间件不生效或路由匹配异常。
• 验证token判断逻辑：打印accessToken和refreshToken的实际值，确认在有有效凭证时确实走到了NextResponse.next()分支，避免因token获取逻辑错误导致意外拦截。
• 清空浏览器缓存：如果之前配置过错误的重定向规则，浏览器可能缓存了旧响应，清空缓存后重新测试。

调整后的完整中间件示例： #

import { NextResponse } from 'next/server';

export function middleware(request) {
  // 根据你的实际存储方式调整token获取逻辑，这里以cookie为例
  const accessToken = request.cookies.get('accessToken')?.value;
  const refreshToken = request.cookies.get('refreshToken')?.value;

  if (request.nextUrl.pathname.startsWith("/dashboard")) {
    if (!accessToken && !refreshToken) {
      return NextResponse.redirect(new URL("/adminLogin", request.url));
    }
    return NextResponse.next();
  }

  return NextResponse.next();
}

// 可选：指定匹配路由，减少中间件不必要的执行
export const config = {
  matcher: ['/dashboard/:path*', '/adminLogin'],
};

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