The Ultimate Guide to Server Actions in NextJs 13 with Error Handling & Validation Using Zod

In this video, we'll learn how to use the new server actions in NextJs 13 by building a Guestbook page on our site. We'll also look at error handling and data validation using Zod.

👉🏼 The Ultimate NextJs Course

👉🏼 Project code (check out the `server-actions` branch)

Chapters:

0:00 Intro
0:30 Definition
2:35 Creation
8:46 Invocation
13:35 Progressive Enhancement
14:46 Revalidation
15:00 Validation
16:00 Using cookies & headers
16:15 Other enhancements
17:00 Glossary
17:36 Project setup
20:35 Refactoring to use server actions
27:30 Error handling
30:40 Data validation with ZOD
39:36 Outro

[zrios]

Amazing!! I used to implement Formik and Yup in client components but this approach is awesome, quicker and easier.

Thanks for share

[grtbigtreehugger]

Many thanks for this super helpful and timely video - was planning to learn and do exactly this today!

[kyle-andrewgovinder]

Fantastic video
Love all of your work
Always learn so much

[ogt]

Exactly what I needed in the right time, thx a lot for this Hamed.

[elvisc]

Great stuff! One question: In your implementation towards the end, the "client side" validation still needs to go through the server action. Is there a way to do client side validation without calling the server action, while keeping the "action" prop in the <form> element? The reason for keeping the action prop in the form element is so that this is the only way the `useFormState` from react-dom can track the form state.

[moteteletsa]

Thank you so much for a wonderful video. It has added so much value in my understanding of Server Actions. Nonetheless, I am really struggling with using redirect when using server actions. Instead of updating the current page on which the form is, I need to redirect user to the next page. Can you show us how we can do that? Thank you for your good content as always.

[bySFer]

Hey Hamed, I was watching your informative YouTube video discussing the updates in Next.js 14. I'd love to learn more from your detailed notes in Notion about these updates. Would you mind sharing them with me? 🙂

[Happyday-nnrh]

very helpful video ❤‍🔥 and is updating video that is nice

[JiNx-yfef]

Thank you so much 🙏, I have learned a lot of things from you 🙏

[mrbanana]

Thanks for the great video, very informative - I learned a lot.

I am wondering if you or anyone else is having problems with propagating errors in the production builds? So everything works fine in dev, but when I run the production server and throw an error in a server action I am met with this error in the error boundary: "An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error."

This happens both for client components and server components calling the same server action. Around 38:00 when you convert the GuestBookEntryForm to a client component and are able to propagate the errors to the client, I see you are running pnpm dev but did it also work on the production build? Sorry for the text wall - was a tricky one to articulate

[alvinacosta]

how to change route after adding a guest? if for example my guest list and add form are on separate pages? thanks!!

[gustavoseabra]

Hi Hamed!
I have a server page with two components that fetch independently, if an error occurs in the fetch of one component and the other manages to get the data normally, I would like only the component with the error to display the error and the reset opportunity. If both have fetch error i want to show the error independently and each one have their own reset. Is it possible? I still haven't come up with a good solution

[khruetc]

Hi Hamed,
I'm just wondering you are throwing the error from the server action.
How can we handle that ?

[nicolasrodi]

How would you lay out the structure for adding a delete button for each todo? In terms of a server action that calls a db function for that and passing it to the button, or which way would you prefer to set that up? Thanks in advance.

[bhdjjxr]

Thanks for great explanation!!
I have a question though.
I got that server-action runs independently of JS but i woner that if execution of server-action starts until after hydration is done. Or even execution of server-action(ex. asynchronous fetch logic or sth) runs also independently of hydration?
The reason i m curious about this is at the end of the video, u said server-action is queued until hydration being done

[mohammadheydari]

Thanks for your video.
I have a question about how secure is to use server action in client components. If i protect a client page using NextAuth, is there any way someone access to server actions that can be called from that page?

[samislam]

I tried to send a POST request using Postman to my server action, in the browser it works, but in postman it doesn't, it just replies back with the HTML, and my console.log() message is not being printed in the terminal as if there is No POST request was sent. why is this?

[abbaskareem]

pardon me for this question if it's sound silly, server action is mutate data on server what if the server is a django-rest-framework server ? I mean another server not next js node server . I hope you understand what I mean. and thank you sir.

[usamecoban]

Setting a cookie on server actions doesnt work. Its only working on middlewares and route handlers. Thats what I understand by testing it. I can only read the cookies on server actions.

I was trying to refresh session token on server actions, tried everything but none is worked

[tomaslanda]

So server actions will replace swr or reactQuery?