Video Belajar
Tonton dan pelajari berbagai topik menarik melalui video pembelajaran eksklusif dari Channel Dave Gray.
Dave Gray
10252
Toast Notification Patterns with Next.js Server Actions and next-safe-action
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
Learn toast notification patterns with Next.js server actions and next-safe-action. Toasts provide pop-up notifications like toast popping out of a toaster. They are a great way to give users immediate feedback when Next.js server actions complete.
💖 Support me on Patreon ➜ https://patreon.com/davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: https://bit.ly/CompNextJSDev
- Advanced React: https://bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
📬 Course Updates ➜ https://courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ https://discord.gg/neKghyefqh
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray
🔗 Source Code: https://github.com/gitdagray/nextjs-toast-notifications
🔗 My Next.js Videos: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6Pk-QJIdGd1tGZEzy9RTgtj
👇 Follow Me On Social Media:
GitHub: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Toast Notification Patterns with Next.js Server Actions and next-safe-action
(00:00) Intro
(00:07) Server Actions & Toast Notifications
(00:34) next-safe-action vs useActionState
(01:24) ShadCN/ui Toast
(02:28) json-server
(03:27) Pattern 1: Waterfall
(09:13) Pattern 2: Response Component
(10:34) Pattern 3: Hook Callbacks
(14:10) Using Multiple Actions
(15:56) Wrap up
📺 Video References:
🔗 next-safe-action: https://youtu.be/ahB3DgUMs1A
🔗 ShadCN/ui for Beginners: https://youtu.be/v0_AT8zaLo8
📚 Tutorial References:
🔗 ShadCN/ui toast: https://ui.shadcn.com/docs/components/toast
🔗 next-safe-action: https://next-safe-action.dev/
🔗 Next.js: https://nextjs.org
🔗 Next.js Server Actions: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
🔗 Zod: https://zod.dev/
Was this tutorial about toast notification patterns for your Next.js Server Actions with next-safe-action helpful? If so, please share. Let me know your thoughts in the comments.
#nextjs #toast #notification
Learn toast notification patterns with Next.js server actions and next-safe-action. Toasts provide pop-up notifications like toast popping out of a toaster. They are a great way to give users immediate feedback when Next.js server actions complete.
💖 Support me on Patreon ➜ https://patreon.com/davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: https://bit.ly/CompNextJSDev
- Advanced React: https://bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
📬 Course Updates ➜ https://courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ https://discord.gg/neKghyefqh
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray
🔗 Source Code: https://github.com/gitdagray/nextjs-toast-notifications
🔗 My Next.js Videos: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6Pk-QJIdGd1tGZEzy9RTgtj
👇 Follow Me On Social Media:
GitHub: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Toast Notification Patterns with Next.js Server Actions and next-safe-action
(00:00) Intro
(00:07) Server Actions & Toast Notifications
(00:34) next-safe-action vs useActionState
(01:24) ShadCN/ui Toast
(02:28) json-server
(03:27) Pattern 1: Waterfall
(09:13) Pattern 2: Response Component
(10:34) Pattern 3: Hook Callbacks
(14:10) Using Multiple Actions
(15:56) Wrap up
📺 Video References:
🔗 next-safe-action: https://youtu.be/ahB3DgUMs1A
🔗 ShadCN/ui for Beginners: https://youtu.be/v0_AT8zaLo8
📚 Tutorial References:
🔗 ShadCN/ui toast: https://ui.shadcn.com/docs/components/toast
🔗 next-safe-action: https://next-safe-action.dev/
🔗 Next.js: https://nextjs.org
🔗 Next.js Server Actions: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
🔗 Zod: https://zod.dev/
Was this tutorial about toast notification patterns for your Next.js Server Actions with next-safe-action helpful? If so, please share. Let me know your thoughts in the comments.
#nextjs #toast #notification