Using Forms in Next.js (Server Actions, Revalidating Data)

0:00 – Introduction
0:06 – Demo
0:21 – Forms with Pages Router
1:05 – create-next-app
1:30 – Server Component (Data Fetching)
1:58 – Forms and action prop
3:05 – Server Actions (and useFormState)
4:32 – Progressive enhancement
5:03 – Loading states (useFormStatus)
7:13 – Revalidating data and caching
8:12 – Accessibility and error states
9:58 – Conclusion

[austincodes]

Genuinely excited about this 🙌 I'd love to see more complicated examples with Zod validation

[maksymdudyk]

new, important and complicated concept such as `server action` the author explains on even more complicated usecases.

[marktaylor]

I learn by doing. Not by reading. This was exactly what i needed. I implemented this, saw it working, learnt how and why it worked and added it to my project. Perfecto. Thanks bro.

[EvHaus]

This is great! Can you do a follow up with some more advanced stuff? Like, how do I handle optimistic updates & failures/rollbacks, how do I ensure my TODOs mutation state is synced across all pages/components that might need it, how can I update TODOs state from within the app code (not as part of a form submission). In other words -- is it possible to use this new paradigm to replace most of what Redux does?

[robgioeli]

I genuinely love Next. It has changed my life financially and has made working with the web intuitive.

[improvingwithfun]

Hi Lee and engineers 👋

Thank you for the smooth video. Watching this I came to a few questions:

1. What is the reason to move from the previous approach? How much performance are we winning here? It would be nice to see some good and old before/after comparisons.
2. Many people are asking for more advanced cases, but are those even possible? I don't see modern forms without the usual rerendering that we used until now.

Thank you and I hope for more such videos in the future!

[kyle-andrewgovinder]

Whoever drew up Lee's specs was very kind. Smart, endearingly charming, adorable as all hell

[pawelblaszczyk__]

Really nice video, your explanations are always amazingly informative, thanks a lot 🔥Also, can’t wait for the stable release of the “cache” function, good to know that it’s coming soon

[JamesNMK]

this thing definitely gonna hurt my head for a few days. thanks for the video.

[MikeBritton]

Thanks for this tutorial, Lee. Excellent job clarifying in simple terms the elements of server actions.

[patrickjreid]

This was a great explaination... the docs were pretty hard to follow and understand. None of the examples connect together so its hard to get a full picture of what is going on.

[vbvsyzw]

Thanks a lot for your explanations and demo it was really useful for me. The only question I didnt find answer on is how to handle multiple actions within single form

[Krzysiekoy]

3:21 - wait a minute. Maybe I'm not understanding something, but doesn't schema.parse throw an error if the data is incorrect? And if yes, shouldn't it be inside the try block?

[AlfonsusAC]

Thank you for the video. Very imformative. Shows how easy it is to create form in Next.js!

[guylepage]

Great walk through as usual! Thank you. 🙏

[filipkovac]

Please make long format video diving into topics like:
client side validation, dependant fields, client side data formatting, array fields...

[gmzi]

thanks lee, this is awesome. I'm just wondering how to clear the text input after a new todo has been created. So much cool stuff to try out!!!

[rockNbrain]

Great job guys, I'd love if server get stable and I will heavly use it !!

[mohamed-zhioua]

always appreciating your valuable content

[Sorkstryparen]

Super great and educational videos you do! Keep it up!