Global State Management in NextJs 14 Using Zustand

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

👉🏼 Project source code (Github)

👉🏼 Inspired by @NiklasZiermann video on @freecodecamp

👉🏼 Let's talk about your project

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

[r.o.c.i.o.g.l]

This is one of those videos where you understand EVERYTHING in a perfectly way. Thank you for being a great teacher.

[kamaliddinsattorov]

You're probably the best guy to teach web dev. Thanks for the effort you put in to spread knowledge.

[kyle-andrewgovinder]

When I see this handsome man smiling on a thumbnail, I already know that I'm about to get even better at using Nextjs

[victormustin]

zustand is so good and simple I love it

[imkirn]

What a surprise hamed! I was doing the same Kanban board task too. Cool

[ansachuk]

You're really best youtube web-dev teacher. I just love it!

[codingwithlucy]

Thanks so much, this was so useful and great you uploaded it exactly on the day that I needed to check out Zustand for Next 14 🤣🙏🏻

[cosmo-rodrigues]

Man, I have no words to say thank you. Cheers from Brazil!

[rohan-motukuri]

Banger! Thank you for your consistent hardwork

[kellslte]

This has gotten me started on using global state in a Next.js app. Your tutorials are straight to the point and full of wisdom! Thank you for this awesome tutorial. Could you do a tutorial on complex datatables with shadcn tables using zustand as state manager?

[MrZiyak]

great vid i feel like this is a perfect usecase for the useOptimistic hook where you can then persist your data on the server instead of the client

[ToumaRenshi]

awesome tutorial. i have learnt a lot of new things from you here. it was a little bit difficult but i am gonna do for myself from scratch soon to get better, thank you !

[Fanaro]

Your tutorials are very helpful, thank you.

[smashmash]

Thanks a lot for the video. It helped me setup persistent zustand.

[karacan]

I want to thank you for your high quality toturials .
Generally I dont like to use typescript and I am trying to do it without typescript when watching any toturials, I wish I could find project that do not use typescript which is not all beginners

[SaMi-kvyi]

That's great, exactly what I was looking for, and besides, can you tell me the "fontFamily" of vsCode in the video?

[simonaedwards]

Hey Hamed, Zustand Docs now have an entire new section "Setup with Next.js" which seems to have way more boilerplate code then described in your great tutorial.

How does this new requirement impact your example? Is it still valid?

[sergheic]

superb tutorial, as all your content is! thank you!

[ahmedabdelrahman]

but with such a setup in nextjs, you create store on each request
the optimal setup is to use provider and assign store to useRef and then chack if store assigned to the ref or not to prevent creating store on each request

[chaoslordi]

Regarding the Hydration:
If I understood you correctly, if I initialize my store with values based on my backend AND if I don't persist the data in my local storage (e.g. user profile data), then I do not need the Skip Hydration/useEffect feature. Is this correct?

Anyway thanks for the explanation, It makes the use of Zustand much clearer, my only question left are real world use cases when to use a global state manager. Every use case so far I have seen, I'd rather put into a cookie or local storage.