Demo of forms with React 19 and Next.js. If you've wondered... "Why does the form clear out my input values?" "How do I pass data from my server action → client?" "How do I handle client / server validation?" "How do I display inline errors next to inputs?" This... should help!show more

Thanks for the suggestion @JamieBytebender! Hope this helps.

There's a bunch of other things I could cover, but this is a start – I just turned on the camera and yapped for a few minutes 🤣

How to Make Sales on UserInterface Freelance Marketplace #freelance

One selling point is that such form can work with JavaScript disabled. The question is, is it worth the effort to make things work this way? I admit that some validation should be done server-side, but much of it can be handled client-side. Maybe we should choose the best fit.

many are complaining, but I really like this pattern opposed to having to rewrite useState and useEffect and handleSubmit code all the time

Thank you for this

Love these ❤️

Spent the last few months figuring out all of this and loving the results now. One thing I haven't figured out is how to handle a redirect after submission from the server action. Like your example, I'm using a try/catch and handling a few actions depending on how our CMS authors have configured their form behavior. Redirects in the try block would be ideal, but they error out. Instead I need pass the redirectUrl back to the form component and handle with an effect. Is that the best I can do?

Why does it need to be in a try block? If it’s truly an uncaught exception, it would bubble to your error boundary.

forms + rsc are the biggest reason I started moving projects over from pages to app router. a much better mental model

I am glad it was kept simple (not easy). Now, we can wrap things up and ease them without shooting ourselves in the foot at such a low level!