NextResponse.redirect not working as expected
Answered
American black bear posted this in #help-forum
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:
When I make a POST request using the following code:
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.
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.
Answered by risky
you need to either use server actions or add a redirect after the fetch on client
32 Replies
American
Can you use
redirect instead?American black bearOP
@American I tried but it didnt work
American
How did you do it? I use it in lots of route files
American black bearOP
@American I will send you a pic now
@American I tried this =
But didnt work
But didnt work
American
it didn't work meaning you're not redirected?
American black bearOP
No im not
Something its happening because register appears on the network, but im not getting redirected
American black bearOP
I make it work by not ussing a router.ts
you need to either use server actions or add a redirect after the fetch on client
Answer
you need to use <form> if you want to redirect to work properly
@Alfonsus Ardani you need to use <form> if you want to redirect to work properly
American black bearOP
you mean de form action?
yes, this works
American black bearOP
Yes but im using react hook form
American black bearOP
i need to use the handleSubmit of react hook form
well, in that case, try handling the redirect in the client side
American black bearOP
I solved it on this way
i deleted the router.ts
and then i create a server side function
so server action?
American black bearOP
Yes let me a second i will show you im opening the ide
Server Actions works too, im glad you found that out
American black bearOP
But with router.ts i couldnt make it work
there are limitation with route.ts and using fetch()
American black bearOP
Yes i need to learn more about it
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)
American black bearOP
Thank you very much for the info