NextJS 中间件在检查令牌时返回空白屏幕

Question

我正在使用它的API制作一个Spotify克隆，并使用Next JS中间件来实现重定向条件，即检查用户是否有令牌，如果没有则重定向到登录页面。

但由于某种原因它返回给我空白的白屏。

这是

middleware.ts

文件的代码

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;

    if (pathname.includes("/api/auth") || token) {
        return NextResponse.next();
    }

    if (!token && pathname !== '/login') {
        return NextResponse.rewrite(new URL('/login', request.url));
    }
}

文件夹结构是

请帮助我。您可以在这里参考完整代码https://github.com/dipesh2508/Vibes

Answer 1

您能分享一下nextJs版本的更多细节吗？所以，我可以给出更完美的答案。

Answer 2

我查看了你的中间件，看起来你正在阻止所有 JS 资源，包括

_next

文件夹，该文件夹对于加载应用程序本身至关重要。

请相应地更正您的条件，它将起作用。对于初学者，您可以使用以下内容。

if (!token && pathname !== '/login' && !pathname.includes("/_next/")) {
  return NextResponse.rewrite(new URL('/login', request.url));
}

请注意，您可能还需要排除您的公共资产。对于前。

favicon.ico

。