server action error handling
Answered
Ray posted this in #help-forum
RayOP
According to the doc, we can return a object to display error on client. However, when I try to return redirect after the form process successful, the client recieve NEXT_REDIRECT and not redirecting....
Answered by Plague
I know exactly what's going on, it has nothing to do with Server Actions and everything to do with the
You CANNOT wrap
See docs: https://nextjs.org/docs/app/api-reference/functions/redirect#example
redirect function.You CANNOT wrap
redirect in a try-catch block because the way redirect works it throw a NEXT_REDIRECT error in order to terminate rendering of the route segment in which it was thrown.See docs: https://nextjs.org/docs/app/api-reference/functions/redirect#example
30 Replies
Oak apple gall wasp
there are 2 redirects avaialble, server and client based on the environment you are you need to pick appropiate one
RayOP
Im using the one from next/navigation on the server action, is it correct?
Oak apple gall wasp
it depends how you are using server action with redirect, could u show screenshot of ur codebase
RayOP
here you go
Oak apple gall wasp
this is action right?
RayOP
yes
Oak apple gall wasp
maybe what u could do is that in ur component whenever u are using this function await it and then redirect from your component itself
RayOP
you mean using client side redirect with useRouter hook, right?
Oak apple gall wasp
for example
SignUp.tsx
SignUp.tsx
<form action={ async () => {
await signup()
redirect('/')
}}>
...some staff
</form>yeah
but best would be if you update ur next.js version to latest sinec server actions are stable now
and it shouldn't have some weird issues
RayOP
it is the latest one
Oak apple gall wasp
well then maybe try this and let me know if this will work
like this
if you want to go fully on server side then useRouter isn't an option
RayOP
well, Im using it with useFormState hook.
it just redirect even there is a error message returnered
it just redirect even there is a error message returnered
RayOP
I don't think server action is stable yet lol. this kind of implementation is so smooth with remix
I know exactly what's going on, it has nothing to do with Server Actions and everything to do with the
You CANNOT wrap
See docs: https://nextjs.org/docs/app/api-reference/functions/redirect#example
redirect function.You CANNOT wrap
redirect in a try-catch block because the way redirect works it throw a NEXT_REDIRECT error in order to terminate rendering of the route segment in which it was thrown.See docs: https://nextjs.org/docs/app/api-reference/functions/redirect#example
Answer
RayOP
oh yeah
This literally just happened to me when I was using a
try-catch block just like you in a server action. I was really confused for about 5 mins when I read the docsRayOP
thanks, i got it now
Oak apple gall wasp
btw rediect doesn't work in client component u should use useRouter
it should work on client components, it works everywhere, but, yes I agree if you're routing on the client definitely should use
useRouter
redirect should only be used on the client IMO if you're routing the user from your application to a complete different website/app
Oak apple gall wasp
Ahhh yes.. well I forgot the docs but I was intutively using redirect on server and useRouter on client
Yeah same lol, until I re-read, I thought redirect was only viable on server.