Using React Hook Form, Zod Validation and Server Actions in NextJs
Вставка
- Опубліковано 6 лип 2024
- In this video, we'll look at implementing forms in NextJs using the React-hook-form library, we'll then add validation using Zod, and at the end, we'll replace our API endpoint with server action.
👉🏼 The Ultimate NextJs Course
🔗 www.hamedbahram.io/courses/ne...
👉🏼 Project source code (Github)
🔗 github.com/HamedBahram/next-rhf
👉🏼 React hook form
🔗 react-hook-form.com
Chapters
0:00 Intro
0:40 Project code setup
1:30 Adding a simple form
5:00 Adding React hook form
13:30 Adding Zod validation
19:00 Using server actions
25:18 Outro - Наука та технологія
Coming from Sveltekit, I now understand why svelte is so beloved
Sveltekit is also a good framework.
about to ditch next and move to nuxt at this point hahah
I cannot even explain how much your videos help simplify my learning. I'm the go to person on Next.js 13 at my work place. Thanks for your videos
Great to hear that! Appreciate the comment.
Very cool content! I have skipped your videos that was published on the last 3 months because of some mess on the job. But now I am going to catch up and explore all of them. Explanation is really very clear. Thanks!
Welcome back! Glad to hear that.
Very helpful, loved how you also showed a basic react form, mentioned a controlled component form as well and compared it to react hook form and why it's better. Keep going!
Glad it was helpful!
I love the detail of your explinations. And, the fact that you showed 4 different ways to accomplish the validation with incremental steps to newer features. Thank yoU!
Glad it was helpful!
Another great video, thanks for talking about the most recent features of Next, you are a great reference on the topic. I am using this exact stack of RHF and Zod and was wondering if I should try server actions, now I will definitely try it out.
Glad it was helpful! Appreciate your comment.
Your videos offer great value to the community of developers across the globe. I really love your fantastic tutorials! ❤
Happy to hear that!
Excellent tutorial, explained so simply. I love the iterative approach of adding more complexity.
Thanks! I'm glad to hear you like the structure of the video.
Congratulations, Hamed! You provided the best explanation on this topic.
Thanks Leonardo! Glad to hear that!
Great video, Hamed! Thank you!
My pleasure!
what a coincidence, I was searching for use hook form usage and the first thing I saw is your Video and it's posted just 14 mins ago :)
Awesome! welcome to the channel.
Hamed thanks for putting this together, so good dude
My pleasure!
This was a fantastic video! Server actions seem super cool
Thanks. Yeah they're pretty cool!
Very very well made video! Thanks for this!
My pleasure! Glad it was helpful.
Great video! Thanks 👍
No problem 👍
Thank you so much Hamed
My pleasure!
Great video!
Would love to see error handling with server actions with useFormState and userFormStatus!
Great suggestion! Wrote it down in my schedule.
Bahram youre the man, thanks for the great content
My pleasure!
thx a lot, all i was looking for.. now let's use it in nextauth with Your next video ;)
You're welcome! Glad you found it helpful!
I want to create a multi page form using server actions and the action prop. But the server action uses the FormData interface. And say I have state to keep track of what set of questions I need rendered out to the screen when next or back is clicked. When state changes, FormData is wiped. I haven’t figured out a solution for this. Do you have any suggestions?
Watch this video → ua-cam.com/video/lW_0InDuejU/v-deo.html
Thanks, Greate video, Wish you best
Thank you!
Hey Hamed! This is an extremely helpful video and I thank you very much for sharing. I just had one question: Why is it you're defining your zod schema for a second time inside your RhfWithAction component rather than using the same schema as defined in @/lib/schema?
No specific reason 😊 you can define all schemas in your lib and use that every where.
Sounds great! Thank you very much! @@hamedbahram
So sorry for the question, but do you have any tutorial to how to use actions with a form to update information, for example a link that i can click and a form with all the information will be loaded and I can start alter data and then save using actions? Thank you so much for your consideration
I'm not sure if I understand the question correctly. Did you mean using server actions?
can someone explain why we need to validate our data with Zod in both the react form hook and also in the server action? Thanks in advance
You should always validate any data coming from the user (the client-side), so that explains the validation on the server-side. The extra validation on the client-side using reac-hook-form is to avoid hitting the server unnecessarily if the data is not valid.
Currently, I am using Next as a BFF with Express as my back-end handling requests using Axios inside of my front-end. Is it worth using server actions in my case? I'd basically be using Axios in the action file to fetch data from Express then send it back to the front-end. I'm not sure if this would simplify things or just shift everything and be awkward.
Server actions are meant to eliminate the need for an API layer to handle form submissions and/or data mutation on the server. In your case, with a separate backend API it won't do that.
@@hamedbahram thanks. I thought that might be the case.
Can you please help me here. Im getting Unhandled Runtime Error.
(0,react_hook_form__WEBPACK_IMPORTED_MODULES_5__.useForm) is not a function.
And in the terminal im getting
Attempted import error:"useForm" is not exported from 'react_hook_form'(imported as 'useForm')
Not sure why that is but are you importing the `useForm` hook in a client component?
@@hamedbahram thanks for the suggestion. I don't use client
Good Tutorial for server action and react hook form.
Can you also create a tutorial to upload profile picture using the react hook form?
Thanks! I do have a video for file upload using server actions, which you can easily extend to add react-hook-forms to it.
Thank you!!!
Anytime!
Hi! I'm having a little trouble with this. Let's say i have 3 buttons that all share the same state but have different values. This is what it looks on the interface => state: "SOON" | "COMPLETED" | "IN PROGRESS" | "".
How do i represent this on zod? with enums? Regardless of what button i click it keeps returning COMPLETED. This is what it looks on my schema:
state: z
.enum(["COMPLETED", "IN PROGRESS", "SOON", ""], {required_error: "This field is required", invalid_type_error: "State must be a string",})
.default("")
And here is an example of the first button:
text here
Im just really confused and i cant find any videos that use a similar approach. Tried asking on the discord zod server yesterday and also trying to find something on the documentation but I'm not sure on how to proceed. I can tell everything is wrong but this is where im at 😟
I'm not sure if I understand three buttons that share the same state and have different values, can you explain what you mean? Are these to buttons used to changed the state to different values? I wouldn't use the `register` function on a button you can just pass a `onClick` event listener to change the state to the desired value for each of the three buttons; And if this is part of your form state you can use the `setValue` function returned form the `useForm` hook to set the state.
@@hamedbahram I'm glad that you suggested to use 'setValue' because that's exactly what I did
I was very confused on how to approach it until i casually crossed path with setValue. Although i already solved it this message helped me reassure that what i did was the right thing.
The form is to create displayable data about the progress of an app.
One of the fields has 3 similar buttons and all use the state value which let the user know if the app is completed, in progress or soon to be made. This is what i ended up doing:
{
setValue("state", "COMPLETED");
setActive("COMPLETED");
}}
className={`
${
active === "COMPLETED"
? "font-bold bg-completed rounded-full p-3 cursor-pointer"
: "cursor-pointer p-3"
} text-sm`}
>
text from 18n here.
And in the schema instead of using enum or anything i just used string() with errors.
Hello. I don't get why use Zod when React-Hook-Form already has a great validation process, with error messages. What does Zod bring to the table?
I think the built-in validation is limited to the html5 form validations, while zod is a full on schema validation tool. You can use whichever satisfies your requirement.
could you show also with trpc and zod (specially with safeParse) and optionally drizzle?
I'll have that in mind for future videos.
As per my understanding, 'useFormStatus' is applicable only with the 'action' prop of the element and not with the 'onSubmit' handler. In this scenario, what would be the appropriate method for disabling the button?
Good question! you can use the `useFormStatus` to get the pending state. See this video → ua-cam.com/video/uAh6ZOytUDk/v-deo.html
@@hamedbahram But as I mentioned, 'useFormStatus' only works with the 'action' prop of the element. It does not work with 'onSubmit', and we cannot use the 'action' prop due to our use of React Hook Form. Is that correct?
@@ilya5734 In that case you can use the `isSubmitting` value from the `formState` property return by the `useForm` hook. See here → react-hook-form.com/docs/useform/formstate
@@hamedbahram it works, many thanks!
always awesome! can you cover this topics ?
- data fetching with server components,
- search params api,
- Show pending ui when i search something,
Thanks for the ideas! I do have videos covering data fetching in server components, and working with the `searchParams` object for search and pagination, so you can find and watch those. I'm currently working on a video for the pending UI while searching, and it'll come out soon.
wow, Glad to hear
i can't initial my form inputs values while usinf defaulvalues of useForm with nextui inputs
const {
register,
handleSubmit,
control,
reset,
formState: { errors }
} = useForm({
defaultValues: {
child: "dd",
name: "dddd",
parent: 'refff'
},
mode: 'onSubmit',
resolver: zodResolver(categorySchema),
// name input
You have to pass `defaultValue` to NextUI `Input` element. You can use the `getValues("name")` function from `useForm` to get the value and pass it to the `defaultValue` prop.
Great!
Thanks!
Just came from your useFormState vid, knew you'd have a video on this :) Just wondering what your thoughts are between the two approaches? I assume they aren't complementary? Sorry, am new to nextjs
No they don't really complement each other, other than the fact that you can call a server action in your submit handler. But the idea of the new hooks in React/NextJs is that it simplifies a lot of code you have to write to manage your form, loading and error state on top of an API endpoint.
@@hamedbahram Thanks for the reply :)
Thanks Hamed. It was insightful. Could have been better adjusting you mic volume to a higher level! :)
You're welcome! Noted, thanks for the feedback.
thank you
You're welcome
is it possible to use Zod withOUT typescript??? thx
Yes, Zod is a schema validation tool, you don't have to use it with TS.
So, will that work if javascript is disabled ?
Not if you're using react-hook-form since it's a client-side hook :)
How to upload a file using nextjs
Where are you uploading to?
Would you please add file upload example with same stack?
Absolutely, I'll have that in mind.