NextJS Middleware校验Token时返回空白页面问题求助

问题诊断 #

你当前的中间件代码存在路径覆盖不全的问题：当用户未持有Token且访问/login页面时，两个if条件都不触发，中间件没有返回任何响应，导致Next.js无法处理请求，最终出现白屏。

修复后的代码 #

调整逻辑，确保所有请求路径都能得到响应返回：

import { getToken } from "next-auth/jwt";
import { NextResponse, NextRequest } from "next/server";

export async function middleware(request: NextRequest) {
    const token = await getToken({ req: request, secret: process.env.JWT_SECRET });
    const { pathname } = request.nextUrl;

    // 放行NextAuth的认证接口
    if (pathname.includes("/api/auth")) {
        return NextResponse.next();
    }

    // 已登录用户正常访问所有页面
    if (token) {
        return NextResponse.next();
    }

    // 未登录用户统一重定向到登录页（含当前访问/login的情况）
    return NextResponse.redirect(new URL('/login', request.url));
}

注：这里用redirect替代rewrite，因为登录跳转属于用户可见的URL变更，rewrite是内部转发，用户地址栏不会更新，不符合登录流程的常规体验。

额外排查点 #

• 确认JWT_SECRET环境变量已在.env.local中正确配置，且与NextAuth配置文件中的值完全一致。
• 检查[...nextauth].ts的Session策略设置，必须为"jwt"才能让getToken正常工作：

  export const authOptions: NextAuthOptions = {
      session: {
          strategy: "jwt",
      },
      // 其他配置项...
  }
  

• 确保middleware.ts放置在项目根目录（非pages/app子目录），Next.js才能正确识别并加载中间件。
• 清除浏览器缓存和Cookie，避免旧的无效Token干扰校验逻辑。

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