This video will look at global state management in NextJs 14 using Zustand. We'll build a task tracker โ Kanban board, and look at persisting the data in the local storage using Zustand middlewares.
๐๐ผ The Ultimate NextJs 14 Course
๐ https://www.hamedbahram.io/courses/nextjs
๐๐ผ Project source code (Github)
๐ https://github.com/HamedBahram/next-zustand
๐๐ผ Inspired by @NiklasZiermann video on @freecodecamp
๐ https://youtu.be/fZPgBnL2x-Q?si=lyYhTpBE_py7Fzet
๐๐ผ Let's talk about your project
๐ https://www.hamedbahram.io/contact
Chapters
0:00 Intro
4:00 Zustand Introduction
8:40 Project setup
12:30 Adding Zustand
22:00 Bind components to Zustand
24:20 Adding shadcn/ui
31:50 Adding a new task
33:56 Adding drag & drop logic
44:15 Deleting tasks
45:00 Persist state in local storage
47:00 Hydration error
50:00 Recap