How to Build a Multi-Page Form in Next js (Server Actions, Zod, and Local Storage)

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

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

  • @aberbaCodes
    @aberbaCodes 3 หลายเดือนก่อน +12

    User should only be able to move next after the step is validation so there's no need to go back due to error. Simple and straightforward.

  • @yoJuicy
    @yoJuicy 3 หลายเดือนก่อน +2

    JQQ, this might be the most helpful video I have watched from you. Love the longer content. You could make a full series off this.
    Thanks for being awesome and sharing so much all the time!

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

      recaptcha would be nice. Do you deal with spam/crawlers?

    • @JamesQQuick
      @JamesQQuick  3 หลายเดือนก่อน +1

      Yay! So glad to hear that. I think I'm going to do more of these longer ones!!

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

      Ooh that's a good idea! I'll add that to the backlog :)

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

    Great video! Thanks for sharing your process.

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

      So glad you enjoyed it!

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

    This!!! More of this!!! 🔥🙌🏼

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

    Hey JQQ, the side navigation is very interesting, could you go through creating Side Navigation from Scratch for sure I am interested in that, to see how you would approach it, and possibly.. an interesting twist, what about including sub steps or nested steps .. how you approach dealing with nested steps and the highlighting ?

  • @adityamishra5654
    @adityamishra5654 2 หลายเดือนก่อน

    How can we handle conditional field validations inside multistep forms in Zod since schema.shape misses out on the optional fields and objects.

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

    Great course, and also to achieve same aim material ui stepper does this in seconds

  • @mariokrstevski8836
    @mariokrstevski8836 3 หลายเดือนก่อน +1

    Do you think its necessary to have a route based stepper, I would do a client component stepper, where we would have the same logic, i dont see why we need more routes like add/step-one. Having a route doesn't bring benefits unless we want to send someone directly to step-n(2,3,4 whatever)

    • @JamesQQuick
      @JamesQQuick  3 หลายเดือนก่อน +1

      I don't think it's necessary. In some ways, it makes things a bit harder, but in others, it simplifies things because there is less we have to track in state I think. I definitely wanted the user to be able to refresh the page on a given step and not go back to the beginning. You could also do that with query params. For example "/add?step=one" or something like that.
      What do you think would be the greatest benefit of doing it all client side?

  • @saiguna6676
    @saiguna6676 2 หลายเดือนก่อน

    your use the link right if i didn't submit the step form so can i change the link to step 3 in url it will open that form so ,react-hook-form has trigger function for this without using links we can use switch case or condition and return

  • @sujjee
    @sujjee 3 หลายเดือนก่อน +4

    Can be done in more better way using zustand and validating form at the time.

    • @JamesQQuick
      @JamesQQuick  3 หลายเดือนก่อน +1

      Never heard of zustand. What is that and why do you love it?

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

      Bro ​@@JamesQQuick, zustand is a state management library alternative to redux.
      Compared to redux it's very simple and easy to work.

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

      @@JamesQQuick state management library

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

      Zustand is amazing

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

      Great points there. This implementation was unnecessarily complicated

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

    Nice content. But still there are separate backend and developer do integrate api in NextJS app.
    Can you please make a video how to integrate APIs in NextJS 14/15 app

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

    Multi page forms that are not spa are simply done by persistenting in database

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

      yep but it becomes costly for db hosting when every user rewrite data 1-3 time

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

      @@funfstuck naa, that's nothing compared to data fetching traffic. This is a non-issue considering the time it takes to fill each form.

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

    It's good tutorial and helpful but your way in clarify code need more simplify to be not complicated ❤❤❤

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

    Tks for tutorial, autosubscribe
    Please make additional tutorial like the result is becoming pdf

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

    its got better if we stored on url schema 🎉

    • @JamesQQuick
      @JamesQQuick  3 หลายเดือนก่อน +1

      Not sure what you mean there? Can you clarify?

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

      @@JamesQQuick i mean use store using url params instead localstorage

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

      @@JamesQQuick i mean stored data on url search params, instead localstorage

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

      ​@@ilmanmanarulqori5632 including files?

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

      @@aberbaCodes not possible