Server Actions in Next.js | Nextjs 13 Server Mutations
Dave Gray
@davegrayteachescodeAbout
Web Development tutorials with full courses on HTML, CSS, JavaScript, React, Node.js and more! My goal is to help you learn how to build the web. Teaching helps me learn, too. I work full-time as a Solutions Architect / Developer and part-time as a university web dev instructor. Thank you for subscribing, supporting my channel and sharing the videos you think may help others. Keep striving for progress over perfection. And a little progress every day goes a very long way. Milestones: July 20, 2020 - 1st video Jan 1, 2021 - 1k subs April 2021 - 4k watch hours Nov 2021 - 10k subs Jan 21, 2022 - Video at 100k views Feb 16, 2022 - 100k watch hours Feb 19, 2022 - 1m views Dec 13, 2022 - 100k subs Dec 2022 - Over 1m views in 1 month April 7, 2023 - 10m views May 26, 2023 - 1m watch hours Sept 22, 2023 - Video at 1m views Dec 25, 2023 - 250k subs
Video Description
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. đ 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 đ 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
Boost Your Next.js Setup
AI-recommended products based on this video
Magnetic Nasal Strips Starter Kit: Comfortable Nasal Breathing Support for Sleep, Helps Reduce Snoring Noise, Includes 60 Tabs (30 Uses) with 4 Sizes
Environet Hydroponic Growing Kit, Self-Watering Mason Jar Herb Garden Starter Kit Indoor, Windowsill Herb Garden, Grow Your Own Herbs from Organic Seeds (Basil)
Herb Garden Planter Indoor Kit 21Pcs Kitchen Herb Garden Starter Kit Growing Kit Including Wooden Box Burlap Pots Soil Discs Gardening Tools Unique Easter Birthday Christmas Gift Ideas for Women Mom
Bonsai Starter Kit â 1x Bonsai Tree | Complete Indoor Starter Kit for Growing Plants with Bonsai Seeds, Tools & Planters â Gardening Gifts for Women & Men
