Next.js Discord

Discord Forum

NextResponse.redirect not working as expected

Answered
American black bear posted this in #help-forum
Open in Discord
Avatar
American black bearOP
Hello everyone,

I'm encountering an issue with redirection using a Next.js API route. I have a router.ts file located at /api/auth/sign-in with a simple logic as follows:

export async function POST(request: Request) {
  const requestUrl = new URL(request.url);

  return NextResponse.redirect(
    `${requestUrl.origin}/auth/register`,
    {
      status: 301
    }
  );
}


When I make a POST request using the following code:

export const handleSignIn = async(data : ILoginForm) => {
  await fetch('/api/auth/sign-in', {
    method: 'POST',
    body: JSON.stringify(data)
  });
};


The POST request works correctly, but the redirection doesn't happen. In the network tab, I can see the information shown in the attached image.

Does anyone have insights into what might be causing this issue? Any help or suggestions would be greatly appreciated.
Image
Answered by risky
you need to either use server actions or add a redirect after the fetch on client
View full answer

32 Replies

Avatar
American
Can you use redirect instead?
Avatar
American black bearOP
@American I tried but it didnt work
Avatar
American
How did you do it? I use it in lots of route files
Avatar
American black bearOP
@American I will send you a pic now
Image
@American I tried this =

But didnt work
Image
Avatar
American
it didn't work meaning you're not redirected?
Avatar
American black bearOP
No im not
Something its happening because register appears on the network, but im not getting redirected
Image
Avatar
American black bearOP
I make it work by not ussing a router.ts
Avatar
risky
you need to either use server actions or add a redirect after the fetch on client
Answer
Avatar
Alfonsus Ardani
Fetch does not handle redirect well
you need to use <form> if you want to redirect to work properly
Avatar
American black bearOP
you mean de form action?
Avatar
Alfonsus Ardani
Image
yes, this works
Avatar
American black bearOP
Yes but im using react hook form
Avatar
Alfonsus Ardani
Avatar
American black bearOP
i need to use the handleSubmit of react hook form
Avatar
Alfonsus Ardani
well, in that case, try handling the redirect in the client side
Avatar
American black bearOP
I solved it on this way
i deleted the router.ts
and then i create a server side function
Avatar
risky
so server action?
Avatar
American black bearOP
Yes let me a second i will show you im opening the ide
Avatar
Alfonsus Ardani
Server Actions works too, im glad you found that out
Avatar
American black bearOP
Image
But with router.ts i couldnt make it work
Avatar
Alfonsus Ardani
there are limitation with route.ts and using fetch()
Avatar
American black bearOP
Yes i need to learn more about it
Avatar
risky
unless you really need to, id say server actions give better dx with more features such as this (normal route handers are still good for 3rd party things tho)
Avatar
American black bearOP
Thank you very much for the info