Search code examples
typescriptnext.jsmiddleware

NextJS Middleware returning Blank Screen When checking for token

I am making a Spotify Clone using it's API and using Next JS Middleware to implement the redirect conditions, which are to check whether the user have a token or not, if not redirect to log in page.

but due to some reason it's returning me blank white screen.

here's the code of middleware.ts file

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));
    }
}

The folder structure is

Folder Structure

Kindly help me out. You can refer to the full code here https://github.com/dipesh2508/Vibes

Solution

  • I looked into your middleware, it seems like you are blocking all the JS resources including _next folder which is essential to load the application itself.

    Please correct your conditions accordingly to that and it will work. For a starter you can use below.

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

    Beware that you might need to exclude your public assets as well for the same. For ex. favicon.ico.