Redirect seemed to have happened, but page still remains the same.

[jade flax]

Hi, here.
In my NextJS app router app. In my /verify page, a form with mobileNumber is submitted to this /api/auth/login route handler, and it should redirect to the /balance page. In the Chrome console. I see the 302 POST was assumed, but the browser still remained the /verify page. What's happening here?

import Auth from "@/lib/auth";
import { headers, cookies } from "next/headers";
import { NextResponse } from "next/server";
import { redirect } from "next/navigation";

export async function POST(req) {
  console.log("POST to /login");
  const { mobileNumber } = await req.json();

  if (!mobileNumber)
    return new NextResponse(null, {
      status: 400,
      statusText: "Mobile number is missing",
    });

  await Auth.server.createSession(mobileNumber);

  const url = req.nextUrl.clone();
  url.pathname = "/balance";

  redirect(url);
}

[lime blaze]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[jade flax]

I resolved the issue already. It's not a bug or NextJS issue at all. It's a browser behavioural thing.

FYI. When you get a redirect response for an async request, you need to capture the response and redirect from the client side. Like below:

const response = await fetch("the-endpoint-url");
if(response.redirected){
   window.location.href(response.url)
}