The favorite way to create forms in Next.js 

Thank you for the informative clips Cody 👍

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.

I have some server actions in my nextjs app that doesn't really need a form. For example delete. Do i need to create a form around that action on my client button to handle loading states and such. Im currently trying to build a ActionButton that takes a server action as prop, showing a spinner when the action is executing, but i want to show both success message and error messages when done. Should i build all my actions so they return a object of like { message: string, status: 'success' | 'error'}?

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

I never noticed that keyboard thock 👌

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

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.

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 ?

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.

Your keyboard sounds so yum

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

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!!! ❤

next-safe-action vs. zsa? What to use?

what is your keyboard setup? sounds so satisfying

What Is that theme?

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.

@cody what do you think about using client side validation/sanitizer that is instantaneous and on submit validate the Jason that is sent to the server? This accomplishes both, right? Very little client side js is needed to validate your inputs on the client side. WDYT?

What keyboard do you have?

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).

Good job babe!

Which VSCode theme are you using? Looks neat.

At 4:27 if you use the required attribute aka client side validation won’t it instantly notify the user and to my knowledge the warning goes away when the user starts typing or clicks away? Thus why not use client side validation and server side validation with next actions boom problem solved

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

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

What is the theme you are using?

Do a video on AWS Amplify Gen 2, it works like Drizzle+Trpc+SST now and generates forms automatically too based on the data models

What's the name of the VS Code theme you're using?

You could use the register from rhf tho, styling your own input component is never that hard. Plus you could use the isPending from tanstack query's mutation to disable the button and show the loading svg inside it. I have worked with loads of forms in my projects. I will be working on a package that uses rhf, tanstack and zod to maximize the dx about these 3 awesome packages

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

How to get that keyboard sound on windows

src code? thank i needed this advice

Not trynna be mean or anything but why would you need to validate your output if your the one writing the output? Like just don't return process.env.API_SECRET right?

Because that action is ran on the server, how is the log even coming through to the browser at the end?

thanks

I been using react-aria-components, it's nice but the package is heavy AF

What about TanStack Form?

I admire your perfect beard growth. Share some tips.

why can't you just use trpc + react hook form?

The ergonomics of all the built in React 19 stuff is so bad. The Remix stuff is so much better but I think they're going to embrace server actions too. Might as well go back to API calls at this point

3:09 you probably misspoke: "oh wait, you can't, because you can't have a server action defined inside of a useFormState" - what you probably meant to say was that you can't have a server action inside of a client component

You just got my code 😢... The same way am doing in my Next template with tailwind

Why not just use tRPC?

Frontend validation for UX, server side validation for correctness.

I've spent forever building a wrapper around shadcn ui + react hook form which fixes the DX You literally just pass and it uses context to pass all the form stuff into the fields Creating the field is as easy as writing Ive been using this internally for the past year and it works very well so I want to publish it as an open source extension of shadcn If you also find the shadcn + react hook form DX to be annoying verbose then id really love to hear your feedback and help in publishing the library I haven't published the code yet because I've been busy with work and not sure how to set up the shadcn like CLI if anyone is able to help with setting up the docs/CLI that would super helpful to publishing all the code for everyone to benefit :)

Imma just stick to zod + react-hook-form.

SaaS owners: Would you pay for an AI chatbot that answers new customers' questions, handles marketing, and directs them to the checkout page when they're ready to subscribe?

Ive used shadcn forms with zod before for a project. Yes its very cool to have but man it sucks to write all this code every fucking time you want to create a form. So boring

Nice video, but feels like too much to setup for form imo😅

Coming from a place of ignorance as someone who's never used React and Next and has only ever developed Vue and Nuxt, this looks nightmare-level tedious. Can someone explain why React/Next is better?

tldr: react forms still suck