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

Поділитися
Вставка
  • Опубліковано 22 лис 2024

КОМЕНТАРІ • 34

  • @aberbaCodes
    @aberbaCodes 3 місяці тому +11

    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 4 місяці тому +4

    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 4 місяці тому

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

    • @JamesQQuick
      @JamesQQuick  4 місяці тому +1

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

    • @JamesQQuick
      @JamesQQuick  4 місяці тому

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

  • @ezevalentine7610
    @ezevalentine7610 3 місяці тому

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

  • @johnpagley
    @johnpagley 4 місяці тому +2

    Great video! Thanks for sharing your process.

  • @bobbyboxer2664
    @bobbyboxer2664 3 місяці тому +1

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

  • @Saiyugi16
    @Saiyugi16 4 місяці тому

    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 ?

  • @mariokrstevski8836
    @mariokrstevski8836 4 місяці тому +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  4 місяці тому +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?

  • @sujjee
    @sujjee 4 місяці тому +4

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

    • @JamesQQuick
      @JamesQQuick  4 місяці тому +1

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

    • @SK_Covers
      @SK_Covers 4 місяці тому

      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

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

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

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

  • @haiderjaafer8164
    @haiderjaafer8164 4 місяці тому

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

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

  • @danimusbar
    @danimusbar 4 місяці тому

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

  • @ilmanmanarulqori5632
    @ilmanmanarulqori5632 4 місяці тому

    its got better if we stored on url schema 🎉

    • @JamesQQuick
      @JamesQQuick  4 місяці тому +1

      Not sure what you mean there? Can you clarify?

    • @ilmanmanarulqori5632
      @ilmanmanarulqori5632 4 місяці тому

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

    • @ilmanmanarulqori5632
      @ilmanmanarulqori5632 4 місяці тому

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

    • @aberbaCodes
      @aberbaCodes 3 місяці тому

      ​@@ilmanmanarulqori5632 including files?

    • @ilmanmanarulqori5632
      @ilmanmanarulqori5632 3 місяці тому

      @@aberbaCodes not possible