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

Mutating data in Next.js and seeing the immediate data updates from the mutations with Nextjs 13 requires understanding how Next.js caches data, how the Next.js useRouter hook works, and how both hard and soft navigation differ within your Next.js application.

⭐ 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/next-js-course

Playlist for this Next.js Course: https://bit.ly/dg-nextjs

Mutating Data in Next.js | Mutations with Nextjs 13

(00:00) Intro
(00:05) Welcome
(00:26) Lesson Plan
(01:02) Important Note
(01:27) Two ways to see immediate updates
(02:34) Reviewing the components
(04:26) router.refresh()
(05:01) Reviewing the app in VS Code
(08:05) Running the app & JSON-Server
(09:47) Identifying a BIG Problem
(13:44) Setting prefetch to false
(15:12) Hard navigation vs Soft navigation
(16:14) Is prefetch the right solution?
(18:35) A Better Solution is almost here

Tutorial References:
Next.js Official Site: https://nextjs.org/
Next.js 13 Beta Docs: https://beta.nextjs.org/docs
ES7 React Snippets Extension: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
Reference GitHub Issue: https://github.com/vercel/next.js/issues/42991

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

#nextjs #mutations #mutating