Redirecting from a post request in my route handler
Answered
American posted this in #help-forum
AmericanOP
My route handler is handling a post request, and I want to redirect at the end of my code however it isn't redirecting. NextResponse.redirect isn't working, neither is redirect()
export const dynamic = 'force-dynamic' // defaults to auto
export async function POST(request: Request) {
return NextResponse.redirect("https://www.google.com", 302);
}
this is my code. weirdly enough, the response is returned correctly and a request to google.com shows up on fiddler however the browser isn't redirected
export const dynamic = 'force-dynamic' // defaults to auto
export async function POST(request: Request) {
return NextResponse.redirect("https://www.google.com", 302);
}
this is my code. weirdly enough, the response is returned correctly and a request to google.com shows up on fiddler however the browser isn't redirected
Answered by joulev
You need to use a server action and call redirect() in there, instead of a normal route handler
16 Replies
@American My route handler is handling a post request, and I want to redirect at the end of my code however it isn't redirecting. NextResponse.redirect isn't working, neither is redirect()
export const dynamic = 'force-dynamic' // defaults to auto
export async function POST(request: Request) {
return NextResponse.redirect("https://www.google.com", 302);
}
this is my code. weirdly enough, the response is returned correctly and a request to google.com shows up on fiddler however the browser isn't redirected
After the request, the client side code becomes fetch("https://google.com") which doesn’t redirect your page anywhere, that’s why.
You need to use a server action and call redirect() in there, instead of a normal route handler
Answer
If you don’t want to use a server action, you need to manually router.push() on the client side
@joulev You need to use a server action and call redirect() in there, instead of a normal route handler
AmericanOP
I ended up doing that in the end yeah. Out of curiosity, is this behaviour something related to nextjs or does it have to do with POST requests themselves ?
@American I ended up doing that in the end yeah. Out of curiosity, is this behaviour something related to nextjs or does it have to do with POST requests themselves ?
Server actions are coupled with the router so when you call redirect(), the router knows. Route handlers are completely separated so whatever happens in route handlers, the router doesn’t know.
AmericanOP
I see. Good to know, thanks :)
@joulev Server actions are coupled with the router so when you call redirect(), the router knows. Route handlers are completely separated so whatever happens in route handlers, the router doesn’t know.
Well iI don't get the point, OP is using NextResponse.redirect
which generates an HTTP response
@Eric Burel Well iI don't get the point, OP is using NextResponse.redirect
In the OP case after the redirect it’s equivalent to calling fetch(google.com) in, say, an onSubmit, which of course doesn’t redirect the frontend, only retrieves the content of google.com
right I feel like a part of the code is missing
ah ok because they call the endpoint via fetch, not a form submission for instance
got it
thanks
Yeah if the OP used something like window.location = "/api/test", the redirect will happen, but in this case the redirect doesn’t affect the frontend
AmericanOP
hm
@Eric Burel ah ok because they call the endpoint via fetch, not a form submission for instance
AmericanOP
that's correct, I'm using react hook form to handle validation of inputs, so in my submit handler I call the endpoint using fetch