Error Handling & Pending State in Forms Using Server Actions in NextJs 14
Вставка
- Опубліковано 16 лип 2024
- This video will look at form submissions, pending state, and error handling in forms using server actions, useFormState, and useFormStatus hooks in NextJs 14.
👉🏼 The Ultimate NextJs 14 Course
→ www.hamedbahram.io/courses/ne...
👉🏼 Project source code (Github)
→ github.com/HamedBahram/next-s...
👉🏼 The ultimate guide to server actions
→ • The Ultimate Guide to ...
Chapters
0:00 Intro
2:00 Project setup
2:56 useFormState hook
7:00 Defining a server action
10:30 Adding the useFormState hook
13:20 useFormStatus hook
14:45 Pending state
15:45 Recap - Наука та технологія
Thank you. You explain in very simple and understandable language. Your videos help me grow ))
Happy to hear that!
Thank you Hamed. You are awsome!
Thank you! Glad to help!
You 're Alway the Best Bro ❤
Thanks man! I appreciate it.
excellent sir,
My pleasure!
Hey Hamed , can you make a video on how to use NextAuth with token rotation and refresh tokens?
Sure I'll dig into it for future videos.
Thanks @@hamedbahram , I will be waiting 😊
Regarding the error message from the state. In the current approach, errors will be visible even if the data is correct until the state changes. So if the user enters the wrong email, validation returns an error message. The user enters a valid email. Server action will make a request and if it is successful, it will return a response and only then the state changes. A simple hack is to combine inputs, action button with useFormStatus and error message into one component. When a user submits the form, the status isPending=true and the condition {!isPending && error} will kick in :) An error message will be hidden until a new state is received.
Thanks for sharing the trick, Andrius!
Is there any way you could give an example of this? I've been stuck on this for the past like 8 hours and I've ended up just using a sort of middleware and state functions to handle errors on the client and any errors on the server function won't be returned to the client just to save me from going insane
@@caseyharper I replayed from another account where I have video (in my native language) on how to implement this, but the comment is not visible. Looks like it needs to be approved.
@@caseyharper what are you trying to do and what is the problem you're trying to solve?
@@AndriusLauFullstack UA-cam removes any comments that include a link.
Thanks.
Anytime!
Hamed ❤ Thank you so much. Your content is always precious. Could you maybe show us how to display error messages on the page as you suggested in the video ?
Also, very much looking forward for server actions in your course. I hope soon to see the update. 🙏
Thanks Ilan! I appreciate that. You can use the `state.error` object to show the error messages anywhere on the page. Also, the server action update lesson on the course announces that server actions are now stable in NextJs 14 with no API changes. You can use the current lesson as the reference for any implementation detail.
@@hamedbahram ♥️
great video. should we still use React hook form aur zod in client validation site aur not ? After this state
Yes there is nothing wrong with using client component and adding client-side validation. You can even combine a client action and a server action.
Hamed, is there any way we can get something like pending state for Non-form components ? for example: it's just a button or just an onClick function that navigate/render a different page or component. I want to get the pending state in this case to display the skeleton or something like loading page showing that the server action is processing and just waiting until it finishes. Please help me with this. Thank you
You can use transitions. Watch this video → ua-cam.com/video/SFZrHMZQon8/v-deo.html
Hey Hamed great video! I want to ask one thing in your video. You gave "use client" to the Form component which previously was a server component. My question is whether after we click the Submit button, the addEntry function still runs on the server side and not on the client?
Yes, correct. Server actions only run on the server.
Even though the function is called in the client component? then the function will still run only on the server and not on the client, correct?
Hi Hamed, Great video and thanks. I noticed that when you submitted the form, it kept the values in the name and message fields. But the version I ran from your repo, the fields are cleared after the submit. Any help on this would be appreciated.
Using transitions in the newer versions of NextJs through the `useFormState` will reset the form automatically after submission.
Nice Video!! Is this applicable when I'm using external backend?
You can call your external package from your server action.
Thank you, do they work with react hook form? I seem to have a lot of problems implementing them in react hook form.
you need to have a client action from where you'd call the server action.
Onchange client side validation are possible with this? Similar to react-hook-form?
Absolutely!
Hey Hamed, I implemented these server actions in my project with some external APIs. I'm confused that I still can see the response in my browser when I click on the server actions path
What do you mean? tell me more...
Hey Hamed, I have a question... Why did you write "_" to the Action file?
The underscore convention marks folders as private in the App router. Not necessary but something you can do.
how do I get the value from a checkbox using useformstate
when using the `useFormState`, form data is passed to your sever action as the second argument. Give your checkbox a `name` attribute and you can access it on the form data.
Is it possible to display the error in a toast in this case instead of displaying it in the blue box?!
Absolutely!
how doI get a value form a checkbox
It depends on your implementation, when using useFormState, the form data is passed to your server action as the second argument. If you're using React state, Ref, or react-hook-form, you can get the value of your checkbox is stores as state or ref.
If already using react-hook-form i guess there is no usecase for useFormState?
It depends how you're handling the form submission.
@@hamedbahram Just trying to figure out if i could somehow use "useFormState" to develop my forms. But cant find one good reason. Can you?
Does this mean we don't need ReactHookForm or TanStackForm anymore?
That's a good question! It depends on what you're trying to do. Watch this video where I combined react-hook-form with server actions → ua-cam.com/video/R_Pj593TH_Q/v-deo.html
@@hamedbahram U where fast to anwser! :) Yes I have seen that also, thats why I'm curios on if it's needed. Ok, my form is pretty advanced with tabs that holds checkboxes, selected users, radioButtons, textAreas. All I want is to disable the submit button and show an error/succes after submit.
سلام و خسته نباشید من انگلیسیم خوب نیست دیگه گفتم همینطوری ازتون سوالمو بپرسم یه سایت درست کردم بک اند نود جی اس و فرانت نکس جی اس و با دیتا بیس پستگرس من اتصال این هارو روی سیستم بلدم و مشکلی ندارم فقط الان بلد نیستم چطوری روی سرور یا هاست قرارشون بدم میتونید منو راهنمایی بکنید بگین چکار کنم یکی از دوستام گفت از داکر استفاده کن بازم گفت میتونی از paas هم استفاده کنی ویا دپلوی کنی ... میتونید منو راهنمایی بکنین و بگید چکار کنم بهتره ؟
Good question! send me a linkedIn message
@@hamedbahram ok 👍
when y ou create that kind of video don't do any as type, because there are problems when you try to type correctly
Thanks for the feedback!