Using React Hook Form, Zod Validation and Server Actions in NextJs

Рет қаралды 57,733

Күн бұрын

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

Пікірлер: 98

@georgewekesa1380 9 ай бұрын

Coming from Sveltekit, I now understand why svelte is so beloved

@hamedbahram 9 ай бұрын

Sveltekit is also a good framework.

@devyb-cc 8 ай бұрын

about to ditch next and move to nuxt at this point hahah

@jeghaire 11 ай бұрын

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

@hamedbahram 11 ай бұрын

Great to hear that! Appreciate the comment.

@user-pe4wq2dv7q 11 ай бұрын

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!

@hamedbahram 11 ай бұрын

Welcome back! Glad to hear that.

@shubhankarvalimbe5286 6 ай бұрын

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!

@hamedbahram 6 ай бұрын

Glad it was helpful!

@yogawithaaron 7 ай бұрын

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!

@hamedbahram 7 ай бұрын

Glad it was helpful!

@MohamedRabi 4 ай бұрын

Your videos offer great value to the community of developers across the globe. I really love your fantastic tutorials! ❤

@hamedbahram 4 ай бұрын

Happy to hear that!

@ariansharifi9682 8 ай бұрын

Excellent tutorial, explained so simply. I love the iterative approach of adding more complexity.

@hamedbahram 8 ай бұрын

Thanks! I'm glad to hear you like the structure of the video.

@giovannitonussi3746 11 ай бұрын

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.

@hamedbahram 11 ай бұрын

Glad it was helpful! Appreciate your comment.

@deepdrops 10 ай бұрын

Congratulations, Hamed! You provided the best explanation on this topic.

@hamedbahram 10 ай бұрын

Thanks Leonardo! Glad to hear that!

@programming8339 11 ай бұрын

Great video, Hamed! Thank you!

@hamedbahram 11 ай бұрын

My pleasure!

@sebcuadros 11 ай бұрын

Hamed thanks for putting this together, so good dude

@hamedbahram 11 ай бұрын

My pleasure!

@lukegordon4734 8 ай бұрын

This was a fantastic video! Server actions seem super cool

@hamedbahram 8 ай бұрын

Thanks. Yeah they're pretty cool!

@the_yugandharr 7 ай бұрын

Very very well made video! Thanks for this!

@hamedbahram 7 ай бұрын

My pleasure! Glad it was helpful.

@anversadutt 11 ай бұрын

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 :)

@hamedbahram 11 ай бұрын

Awesome! welcome to the channel.

@moodymonstrosity1423 Ай бұрын

Thank you so much Hamed

@hamedbahram Ай бұрын

My pleasure!

@kuroshhusseini8170 4 ай бұрын

Bahram youre the man, thanks for the great content

@hamedbahram 4 ай бұрын

My pleasure!

@user-sw5pf3te7c 5 ай бұрын

Great video! Thanks 👍

@hamedbahram 5 ай бұрын

No problem 👍

@Alireza-kw6fj 7 ай бұрын

Thanks, Greate video, Wish you best

@hamedbahram 7 ай бұрын

Thank you!

@TheSamirux 10 ай бұрын

Thank you!!!

@hamedbahram 10 ай бұрын

Anytime!

@b166er4 7 ай бұрын

thx a lot, all i was looking for.. now let's use it in nextauth with Your next video ;)

@hamedbahram 7 ай бұрын

You're welcome! Glad you found it helpful!

@samislam2746 5 ай бұрын

Great!

@hamedbahram 5 ай бұрын

Thanks!

@TheRoseWoodBody 9 ай бұрын

Great video! Would love to see error handling with server actions with useFormState and userFormStatus!

@hamedbahram 9 ай бұрын

Great suggestion! Wrote it down in my schedule.

@TylerForestHauser 10 ай бұрын

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?

@hamedbahram 10 ай бұрын

No specific reason 😊 you can define all schemas in your lib and use that every where.

@TylerForestHauser 10 ай бұрын

Sounds great! Thank you very much! @@hamedbahram

@holdthat4090 16 күн бұрын

You can wrap a form input and text area with 'memo' from React, it skips a component re-render when its props don't change. I want to figure out how to use zod for form validation but plug it into a state reducer instead. I feel it's possibly a better approach to dispatch a set state action that plugs into zod ...somehow, then the form inputs get really light.

@hamedbahram 16 күн бұрын

That can be a good approach!

@sagesofsound298 6 ай бұрын

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?

@hamedbahram 6 ай бұрын

Watch this video → kzfaq.info/get/bejne/or2PY6yfqdvJmok.html

@dimakavetskyy2082 8 ай бұрын

thank you

@hamedbahram 8 ай бұрын

You're welcome

@DaumChannelGamePart 11 ай бұрын

Good Tutorial for server action and react hook form. Can you also create a tutorial to upload profile picture using the react hook form?

@hamedbahram 11 ай бұрын

Thanks! I do have a video for file upload using server actions, which you can easily extend to add react-hook-forms to it.

@ricardoscarpim3183 9 ай бұрын

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

@hamedbahram 9 ай бұрын

I'm not sure if I understand the question correctly. Did you mean using server actions?

@leonardshayo7903 3 ай бұрын

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

@hamedbahram 3 ай бұрын

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.

@InarusLynx 4 ай бұрын

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.

@hamedbahram 4 ай бұрын

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.

@InarusLynx 4 ай бұрын

@@hamedbahram thanks. I thought that might be the case.

@ilya5734 Ай бұрын

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?

@hamedbahram Ай бұрын

Good question! you can use the `useFormStatus` to get the pending state. See this video → kzfaq.info/get/bejne/q6eYab2A3tq5dJ8.html

@ilya5734 Ай бұрын

@@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?

@hamedbahram Ай бұрын

@@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

@ilya5734 Ай бұрын

@@hamedbahram it works, many thanks!

@rahathosen8441 11 ай бұрын

always awesome! can you cover this topics ? - data fetching with server components, - search params api, - Show pending ui when i search something,

@hamedbahram 11 ай бұрын

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.

@rahathosen8441 11 ай бұрын

wow, Glad to hear

@vishnumouli 7 ай бұрын

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')

@hamedbahram 7 ай бұрын

Not sure why that is but are you importing the `useForm` hook in a client component?

@vishnumouli 7 ай бұрын

@@hamedbahram thanks for the suggestion. I don't use client

@ThomasTridon Ай бұрын

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?

@hamedbahram Ай бұрын

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.

@nickwoodward819 Ай бұрын

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

@hamedbahram Ай бұрын

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.

@nickwoodward819 Ай бұрын

@@hamedbahram Thanks for the reply :)

@RegalWK 10 ай бұрын

could you show also with trpc and zod (specially with safeParse) and optionally drizzle?

@hamedbahram 10 ай бұрын

I'll have that in mind for future videos.

@tree9437 7 ай бұрын

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 😟

@hamedbahram 7 ай бұрын

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.

@tree9437 7 ай бұрын

@@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.

@user-es9oc8gb3u 6 ай бұрын

Thanks Hamed. It was insightful. Could have been better adjusting you mic volume to a higher level! :)

@hamedbahram 6 ай бұрын

You're welcome! Noted, thanks for the feedback.

@user-xq2pi3bu4y 10 ай бұрын

is it possible to use Zod withOUT typescript??? thx

@hamedbahram 10 ай бұрын

Yes, Zod is a schema validation tool, you don't have to use it with TS.

@omarsaggou8289 6 ай бұрын

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

@hamedbahram 6 ай бұрын

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.