The favorite way to create forms in Next.js

My Products

Useful Links

[zhenobiikuzo]

dangg you summarize my sufferingg trying to work with nextjs forms these week

[vasyaqwe]

often times I just throw a required attribute on the inputs, and have zod validate the input on the server. I like the simplicity of that.

[cgh]

The improvement with client side validation isn’t just UX. ideally you should never send dirty data to your server/api.

The validation on the server action should be a final step that ideally never fails as the client side validation is ensuring the correct data is sent.

[ramy]

You briefly mentioned conform for server validation. But it actually does both the client and server form validation, it does everything you need a form libeary to do and the code will be much cleaner and more concise than RHF on the client and zsa on the server.

[lirbartal]

This is the coolest thing ever! The creator seems very smart!

[cipherwlf]

Thank you for the informative clips Cody 👍

[dustatron]

Thank you for this video. I know forms aren’t the sexiest bit of web tech but I feel like the form patterns for react ui are in a huge transition.

[NXTE]

You’re looking at the shadcn forms which is lot more boilerplate than it needs to be. RHF on its own is pretty simple imo

[tiagodev]

Every time I come back to see where forms are at I feel like I should have become a particle physicist instead.

[Love-idgu]

Hi, I really enjoy learning from your tutorials!👋
Can you please make next.js 15rc + drizzle + lucia + zod + react-hook-form + shadcn lesson. Authorization, registration, double authentication by email code, users browsing the site without authorization and adding/editing entries of an authorized user with Admin role.
Thank you very much!!! ❤

[Metruzanca]

Neat. I've done my own back and forth with forms. Now that SolidStart is releasing stable, I wanna figure out whats the best way to make forms in solid.

[aliameur]

You can still do progressive enhancement with all the client-side bells & whistles RHF provides. You would need to use both the action and onSubmit props on the form element (use e.preventDefault for onSubmit). Two slight issues with this approach 1) the extra formStates in the return useForm object are now wrong and need to be manually implemented 2) Loading states using isSubmitting from RHF or useFormStatus don't work, but I fixed this with a custom hook that is basically the same as the upcoming/beta useActionState react hook. For 99% of use cases this approach should be more good enough.

Nice point on the type safety of the server actions, I guess some might overlook the fact that they are still exposed endpoints. I personally used schema.parse from zod to validate my inputs and outputs which worked out pretty well (sending back errors + earlier states as well).

[griffadev]

Nice thing here is you can share the zod schema across frontend and backend too

[mitch]

what is your keyboard setup? sounds so satisfying

[webhero]

very similiar for next js documentation

[flexdash]

Genuine question - people started using these safe server action wrappers that looks pretty much exactly like tRPC procedures. So at this point, why not just use tRPC? And it comes with react query built in so it manages loading states and caching as well.

[bibblebabl]

But not so long ago you were recommending the next safe action. You change libraries every week. PS. I've tried NSA - it's very crude. Even the author tries to fix all upcoming issues I'm not sure if it's a better approach instead of your own boilerplate

[wadoudazer]

1:30 also you can disable html5 validation, i use it a lot to see what i am writing in password input, by changing the type from password to text hahaha

[romaind]

Hello. I don't understand why you don't use basic zod validation for the server action, and instead use libs like zsa. What am I missing ?

[hamidfarmani]

I'd recommend you to check out Mantine and Mantine forms