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

Рет қаралды 14,632

Күн бұрын

Пікірлер: 34

@aberbaCodes 3 ай бұрын

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 3 ай бұрын

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 3 ай бұрын

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

@JamesQQuick 3 ай бұрын

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

@JamesQQuick 3 ай бұрын

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

@bobbyboxer2664 3 ай бұрын

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

@johnpagley 3 ай бұрын

Great video! Thanks for sharing your process.

@JamesQQuick 3 ай бұрын

So glad you enjoyed it!

@ezevalentine7610 3 ай бұрын

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

@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 2 ай бұрын

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

@mariokrstevski8836 3 ай бұрын

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 3 ай бұрын

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 3 ай бұрын

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

@JamesQQuick 3 ай бұрын

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

@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 3 ай бұрын

@@JamesQQuick state management library

@justinleong3967 3 ай бұрын

Zustand is amazing

@aberbaCodes 3 ай бұрын

Great points there. This implementation was unnecessarily complicated

@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 Ай бұрын

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

@samiullahsheikh5015 Ай бұрын

I would like to see how you do it