Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

Server Actions in Next.js are a new feature that will let us explore Nextjs Server Mutations with a CRUD app. You will learn different ways to invoke async server actions and use progressively enhanced forms.

⭐ 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

Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/

Source Code: https://github.com/gitdagray/nextjs-server-actions

Server Actions in Next.js | Nextjs 13 Server Mutations

(00:00) Intro
(00:05) Welcome
(00:26) Getting Started
(01:06) What Do Server Actions Provide?
(01:33) Project Setup & Config
(03:54) Server Action with action prop
(05:17) Ways to Invoke a Server Action
(06:16) addTodo Server Action
(08:36) What is Progressive Enhancement?
(09:27) Progressive Enhancement Example
(11:54) Server Action with formAction prop
(15:27) Server Mutations definition
(15:58) deleteTodo & updateTodo Server Actions
(16:43) Server Action with startTransition
(18:38) Server Mutation Navigation Issue
(20:12) Fix for the Navigation Issue
(23:28) useOptimistic for Optimistic Updates

Tutorial References:
Next.js Official Site: https://nextjs.org/
Next.js Docs for Server Actions: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions
ES7 React Snippets Extension: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

Was this Next.js tutorial about server actions helpful? If so, please share. Let me know your thoughts in the comments.

#nextjs #server #actions