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

แชร์
ฝัง
  • เผยแพร่เมื่อ 4 ธ.ค. 2024

ความคิดเห็น • 104

  • @jeghaire
    @jeghaire ปีที่แล้ว +14

    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
      @hamedbahram  ปีที่แล้ว +1

      Great to hear that! Appreciate the comment.

  • @MohamedRabi
    @MohamedRabi 8 หลายเดือนก่อน +4

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

    • @hamedbahram
      @hamedbahram  8 หลายเดือนก่อน

      Happy to hear that!

  • @shubhankarvalimbe5286
    @shubhankarvalimbe5286 10 หลายเดือนก่อน +3

    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
      @hamedbahram  10 หลายเดือนก่อน

      Glad it was helpful!

  • @georgewekesa1380
    @georgewekesa1380 ปีที่แล้ว +22

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

    • @hamedbahram
      @hamedbahram  ปีที่แล้ว +7

      Sveltekit is also a good framework.

    • @devyb-cc
      @devyb-cc ปีที่แล้ว +1

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

  • @ВиталийВвв-ж9о
    @ВиталийВвв-ж9о ปีที่แล้ว +3

    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
      @hamedbahram  ปีที่แล้ว

      Welcome back! Glad to hear that.

  • @yogawithaaron
    @yogawithaaron 11 หลายเดือนก่อน

    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
      @hamedbahram  11 หลายเดือนก่อน

      Glad it was helpful!

  • @ariansharifi9682
    @ariansharifi9682 ปีที่แล้ว +3

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

    • @hamedbahram
      @hamedbahram  ปีที่แล้ว

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

  • @deepdrops
    @deepdrops ปีที่แล้ว +2

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

    • @hamedbahram
      @hamedbahram  ปีที่แล้ว

      Thanks Leonardo! Glad to hear that!

  • @anversadutt
    @anversadutt ปีที่แล้ว +1

    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
      @hamedbahram  ปีที่แล้ว

      Awesome! welcome to the channel.

  • @giovannitonussi3746
    @giovannitonussi3746 ปีที่แล้ว +3

    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
      @hamedbahram  ปีที่แล้ว

      Glad it was helpful! Appreciate your comment.

  • @sebcuadros
    @sebcuadros ปีที่แล้ว +1

    Hamed thanks for putting this together, so good dude

  • @lukegordon4734
    @lukegordon4734 ปีที่แล้ว +1

    This was a fantastic video! Server actions seem super cool

    • @hamedbahram
      @hamedbahram  ปีที่แล้ว

      Thanks. Yeah they're pretty cool!

  • @programming8339
    @programming8339 ปีที่แล้ว +1

    Great video, Hamed! Thank you!

  • @the_yugandharr
    @the_yugandharr 11 หลายเดือนก่อน +1

    Very very well made video! Thanks for this!

    • @hamedbahram
      @hamedbahram  11 หลายเดือนก่อน +1

      My pleasure! Glad it was helpful.

  • @TheRoseWoodBody
    @TheRoseWoodBody ปีที่แล้ว +1

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

    • @hamedbahram
      @hamedbahram  ปีที่แล้ว +1

      Great suggestion! Wrote it down in my schedule.

  • @holdthat4090
    @holdthat4090 4 หลายเดือนก่อน +1

    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
      @hamedbahram  4 หลายเดือนก่อน

      That can be a good approach!

  • @kuroshhusseini8170
    @kuroshhusseini8170 8 หลายเดือนก่อน +1

    Bahram youre the man, thanks for the great content

    • @hamedbahram
      @hamedbahram  8 หลายเดือนก่อน

      My pleasure!

  • @TylerForestHauser
    @TylerForestHauser ปีที่แล้ว +2

    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
      @hamedbahram  ปีที่แล้ว +1

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

    • @TylerForestHauser
      @TylerForestHauser ปีที่แล้ว +1

      Sounds great! Thank you very much! @@hamedbahram

  • @ilya5734
    @ilya5734 5 หลายเดือนก่อน

    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
      @hamedbahram  5 หลายเดือนก่อน

      Good question! you can use the `useFormStatus` to get the pending state. See this video → th-cam.com/video/uAh6ZOytUDk/w-d-xo.html

    • @ilya5734
      @ilya5734 5 หลายเดือนก่อน

      @@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
      @hamedbahram  5 หลายเดือนก่อน +1

      @@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
      @ilya5734 5 หลายเดือนก่อน

      ​@@hamedbahram it works, many thanks!

  • @moodymonstrosity1423
    @moodymonstrosity1423 5 หลายเดือนก่อน +1

    Thank you so much Hamed

    • @hamedbahram
      @hamedbahram  5 หลายเดือนก่อน

      My pleasure!

  • @IanLeggett-r5k
    @IanLeggett-r5k 9 หลายเดือนก่อน +1

    Great video! Thanks 👍

    • @hamedbahram
      @hamedbahram  9 หลายเดือนก่อน

      No problem 👍

  • @InarusLynx
    @InarusLynx 9 หลายเดือนก่อน +1

    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
      @hamedbahram  9 หลายเดือนก่อน +1

      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
      @InarusLynx 9 หลายเดือนก่อน

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

  • @b166er4
    @b166er4 11 หลายเดือนก่อน +1

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

    • @hamedbahram
      @hamedbahram  11 หลายเดือนก่อน

      You're welcome! Glad you found it helpful!

  • @Alireza-kw6fj
    @Alireza-kw6fj ปีที่แล้ว +1

    Thanks, Greate video, Wish you best

  • @nickwoodward819
    @nickwoodward819 5 หลายเดือนก่อน

    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
      @hamedbahram  5 หลายเดือนก่อน

      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
      @nickwoodward819 5 หลายเดือนก่อน

      @@hamedbahram Thanks for the reply :)

  • @DaumChannelGamePart
    @DaumChannelGamePart ปีที่แล้ว +1

    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
      @hamedbahram  ปีที่แล้ว +1

      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
    @ricardoscarpim3183 ปีที่แล้ว +1

    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
      @hamedbahram  ปีที่แล้ว

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

  • @sagesofsound298
    @sagesofsound298 10 หลายเดือนก่อน +1

    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
      @hamedbahram  10 หลายเดือนก่อน

      Watch this video → th-cam.com/video/lW_0InDuejU/w-d-xo.html

  • @renatomignogna6895
    @renatomignogna6895 9 หลายเดือนก่อน +1

    So, will that work if javascript is disabled ?

    • @hamedbahram
      @hamedbahram  9 หลายเดือนก่อน

      Not if you're using react-hook-form since it's a client-side hook :)

  • @rahathosen8441
    @rahathosen8441 ปีที่แล้ว +1

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

    • @hamedbahram
      @hamedbahram  ปีที่แล้ว +2

      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
      @rahathosen8441 ปีที่แล้ว +1

      wow, Glad to hear

  • @MohammadHosseinAmirpanahi
    @MohammadHosseinAmirpanahi 10 หลายเดือนก่อน +1

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

    • @hamedbahram
      @hamedbahram  10 หลายเดือนก่อน

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

  • @vishnumouli
    @vishnumouli 11 หลายเดือนก่อน +1

    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
      @hamedbahram  11 หลายเดือนก่อน +1

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

    • @vishnumouli
      @vishnumouli 11 หลายเดือนก่อน +1

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

  • @leonardshayo7903
    @leonardshayo7903 7 หลายเดือนก่อน +1

    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
      @hamedbahram  7 หลายเดือนก่อน +1

      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.

  • @Hicham-z7t
    @Hicham-z7t ปีที่แล้ว +1

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

    • @hamedbahram
      @hamedbahram  ปีที่แล้ว +1

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

  • @ThomasTridon
    @ThomasTridon 5 หลายเดือนก่อน

    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
      @hamedbahram  5 หลายเดือนก่อน

      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.

  • @tree9437
    @tree9437 ปีที่แล้ว +1

    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
      @hamedbahram  ปีที่แล้ว +1

      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
      @tree9437 ปีที่แล้ว

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

  • @Racine14
    @Racine14 11 หลายเดือนก่อน

    How to upload a file using nextjs

    • @hamedbahram
      @hamedbahram  11 หลายเดือนก่อน

      Where are you uploading to?

  • @cosmicspacelatte
    @cosmicspacelatte 4 หลายเดือนก่อน

    I tried this but I couldn't get it to work. My server action is never called and I don't know why.

    • @hamedbahram
      @hamedbahram  3 หลายเดือนก่อน

      Clone my code and see what you're doing differently.

  • @TheSamirux
    @TheSamirux ปีที่แล้ว +1

    Thank you!!!

  • @samislam2746
    @samislam2746 9 หลายเดือนก่อน +1

    Great!

  • @dimakavetskyy2082
    @dimakavetskyy2082 ปีที่แล้ว +1

    thank you

  • @omarsaggou8289
    @omarsaggou8289 11 หลายเดือนก่อน +1

    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
      @hamedbahram  11 หลายเดือนก่อน

      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.

  • @mohdsahil226
    @mohdsahil226 ปีที่แล้ว +1

    Would you please add file upload example with same stack?

    • @hamedbahram
      @hamedbahram  ปีที่แล้ว +1

      Absolutely, I'll have that in mind.

  • @gauravvarma3645
    @gauravvarma3645 3 หลายเดือนก่อน

    One small correction: if we use a simple controlled form, typing into the fields won't re render every time since react batches state updates..
    Update: nevermind, I was wrong

    • @hamedbahram
      @hamedbahram  3 หลายเดือนก่อน

      Unfortunately that's not the case. When you type in a field, react re-renders on every state update. Batching state updates is not about singular state updates, it's when you update two different states right after on another, which will be batched in one render pass. Look at the "Isolate re-render" section of the react-hook-form docs for a visual representation of re-renders on every keystroke.

    • @gauravvarma3645
      @gauravvarma3645 3 หลายเดือนก่อน

      @@hamedbahram I appreciate your explanation, but I believe there might be some misunderstanding. To demonstrate my point, I've created a code sandbox that shows a different behavior than what you're describing. I sent the CodeSandbox link to you via your contact form on your personal site.
      In this sandbox, I've set up a simple controlled form with input fields. I've also added a console.log("re-render") statement in the component body. What I've observed is that this log only prints when the page initially renders, not on every keystroke as we might expect if re-rendering was happening each time.
      This behavior suggests that React is indeed optimizing the rendering process, even for controlled components. It's possible that React is batching these updates or using other optimization techniques to prevent unnecessary re-renders.

    • @gauravvarma3645
      @gauravvarma3645 3 หลายเดือนก่อน

      Ah you know what, I think I might have been misreading the console logs, you are right. Carry on, please ignore my embarrassing misunderstanding.