Next.js Discord

Discord Forum

Middleware affecting the redirect page css

Answered
Pulx/Mars posted this in #help-forum
Open in Discord
Pulx/MarsOP
hey nextjs devs! Got an issue and I wanna know if you encountered it and how did you exactly dixed it?
import { cookies } from "next/headers";
import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export function middleware(request: NextRequest) {
  const isLoggedin = cookies().get("isLoggedin");
  const acceptHeader = request.headers.get("accept");
  if (acceptHeader && acceptHeader.includes("text/html")) {
    if (!isLoggedin && request.nextUrl.pathname !== "/signup") {
      return NextResponse.redirect(new URL("/signup", request.url));
    }
    if (isLoggedin && request.nextUrl.pathname == "/signup") {
      return NextResponse.redirect(new URL("/", request.url));
    }
    return NextResponse.next();
  }
}


This code works only because i use request.headers.get("accept");.Why is not working without it? GPT said that the browser cant get the css file because of something from middleware. Its the first time i see this error and I'm wondering if there is a better solution to fix that
Answered by Ray
so your middleware will look like this
import { cookies } from "next/headers";
import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export function middleware(request: NextRequest) {
  const isLoggedin = cookies().get("isLoggedin");
  if (!isLoggedin && request.nextUrl.pathname !== "/signup") {
    return NextResponse.redirect(new URL("/signup", request.url));
  }
  if (isLoggedin && request.nextUrl.pathname == "/signup") {
    return NextResponse.redirect(new URL("/", request.url));
  }
  return NextResponse.next();
}

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     */
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}
View full answer

7 Replies

@Ray what page are not loading?
Pulx/MarsOP
it depends.If i use main page and singup page in matcher and try to do an action like ,as a already connected user, to access the signup page,the middleware will continuously send me to the main page or something like that. Same for not logged in users. If the wanna access signup page,it will not work,the browser will not load the page and it will trow an error
Ray
so your middleware will look like this
import { cookies } from "next/headers";
import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export function middleware(request: NextRequest) {
  const isLoggedin = cookies().get("isLoggedin");
  if (!isLoggedin && request.nextUrl.pathname !== "/signup") {
    return NextResponse.redirect(new URL("/signup", request.url));
  }
  if (isLoggedin && request.nextUrl.pathname == "/signup") {
    return NextResponse.redirect(new URL("/", request.url));
  }
  return NextResponse.next();
}

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     */
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}
Answer