I am having issue regarding the redirection from middleware. The route is not changing(http://localhost:3000/) but page loads and when I refresh the page the route also changed to http://localhost:3000/profile. I am checking new_user from cookies and if newUser is true then I redirect to profile page.

Below is my middleware.

import { NextResponse } from "next/server";
import { ResponseCookies, RequestCookies } from "next/dist/server/web/spec-extension/cookies";
import { tokenPathValidator } from "@/utils/api/server/shared/apis";

function applySetCookie(req, res) {
  const setCookies = new ResponseCookies(res.headers);

  const newReqHeaders = new Headers(req.headers);
  const newReqCookies = new RequestCookies(newReqHeaders);
  setCookies.getAll().forEach((cookie) => newReqCookies.set(cookie));

  const dummyRes = NextResponse.next({ request: { headers: newReqHeaders } });

  dummyRes.headers.forEach((value, key) => {
    if (key === "x-middleware-override-headers" || key.startsWith("x-middleware-request-")) {
      res.headers.set(key, value);
    }
  });
}

function deleteCookie(response, name) {
  response.cookies.set(name, "", { maxAge: 0 });
}

export async function middleware(request) {
  const token = request.cookies.get("access_token");
  const refreshToken = request.cookies.get("refresh_token");
  const newUser = request.cookies.get("new_user");

  const publicPaths = ["/login", "/forgot-password"];
  const authenticatedPublicPaths = ["/", "/app", "/not-authorized", "/profile"];
  const pathname = request.nextUrl.pathname;

  if (!token && !publicPaths.includes(pathname)) {
    return NextResponse.redirect(new URL("/login", request.url));
  }

  if (newUser?.value === "true") {
    if (pathname !== "/profile") return NextResponse.redirect(new URL("/profile", request.url));
  }

  if (publicPaths.includes(pathname)) {
    return NextResponse.next();
  }

  if (token) {
    let hasPermission;
    try {
      hasPermission = await tokenPathValidator(token.value, pathname, refreshToken?.value);
      if (authenticatedPublicPaths.includes(pathname)) {
        const response = NextResponse.next();
        if (hasPermission.access) {
          response.cookies.set("access_token", hasPermission.access);
          applySetCookie(request, response);
        }
        return response;
      }
    } catch (error) {
      const response = NextResponse.redirect(new URL("/login", request.url));
      deleteCookie(response, "token_detail");
      deleteCookie(response, "access_token");
      deleteCookie(response, "refresh_token");
      deleteCookie(response, "new_user");
      return response;
    }

    if (hasPermission.access) {
      const response = NextResponse.next();
      response.cookies.set("access_token", hasPermission.access);

      if (!hasPermission.has_permission) {
        const redirectResponse = NextResponse.redirect(new URL("/not-authorized", request.url));
        redirectResponse.cookies.set("access_token", hasPermission.access);
        applySetCookie(request, redirectResponse);
        return redirectResponse;
      }
      applySetCookie(request, response);
      return response;
    }

    if (!hasPermission.has_permission) {
      return NextResponse.redirect(new URL("/not-authorized", request.url));
    }
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};

These below lines causing problem

if (newUser?.value === "true") {
    if (pathname !== "/profile") return NextResponse.redirect(new URL("/profile", request.url));
  }