Global State Management in NextJs 14 Using Zustand

Рет қаралды 21,511

Күн бұрын

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
🔗 www.hamedbahram.io/courses/ne...
👉🏼 Project source code (Github)
🔗 github.com/HamedBahram/next-z...
👉🏼 Inspired by ‪@NiklasZiermann‬ video on ‪@freecodecamp‬
🔗 • Zustand React State Ma...
👉🏼 Let's talk about your project
🔗 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

Пікірлер: 89

@kamaliddinsattorov7493 7 ай бұрын

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

@hamedbahram 7 ай бұрын

My pleasure! Glad you think so.

@wibbs88 5 ай бұрын

I agree! Great teaching style. Looking forward to more content in 24.

@hamedbahram 5 ай бұрын

@@wibbs88 Thanks! for sure!

@kyle-andrewgovinder9902 7 ай бұрын

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

@hamedbahram 7 ай бұрын

Thanks Kyle 😎 I appreciate that!

@imkir4n 7 ай бұрын

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

@hamedbahram 7 ай бұрын

Cool 🙌🏼

@codingwithlucy 7 ай бұрын

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 🤣🙏🏻

@hamedbahram 7 ай бұрын

My pleasure! Glad it was useful! Right on schedule 😅

@victormustin2547 7 ай бұрын

zustand is so good and simple I love it

@hamedbahram 7 ай бұрын

Absolutely!

@cosmo-rodrigues 2 ай бұрын

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

@hamedbahram 2 ай бұрын

My pleasure, man! I appreciate it.

@VincentFulco 7 ай бұрын

Terrific topic and tutorial. Thanks

@hamedbahram 7 ай бұрын

Appreciate it! Glad it was helpful!

@rohan-motukuri 3 ай бұрын

Banger! Thank you for your consistent hardwork

@hamedbahram 3 ай бұрын

My pleasure! I appreciate that.

@smashmash3455 6 ай бұрын

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

@hamedbahram 6 ай бұрын

Glad to hear that!

@ToumaRenshi 2 ай бұрын

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 !

@hamedbahram 2 ай бұрын

My pleasure! Glad it was helpful.

@Fanaro Ай бұрын

Your tutorials are very helpful, thank you.

@hamedbahram Ай бұрын

Glad to hear that!

@sergheic31 4 ай бұрын

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

@hamedbahram 4 ай бұрын

You're welcome! I appreciate that.

@MrZiyak99 7 ай бұрын

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

@hamedbahram 7 ай бұрын

That's a great idea💡

@AyanGhosh-vj7ui 2 ай бұрын

Thank you so much, this was so helpful ❤

@hamedbahram 2 ай бұрын

You're welcome! I'm glad it was helpful.

@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?

@hamedbahram Ай бұрын

I'm glad you've found the videos useful. You can watch this video for data tables → kzfaq.info/get/bejne/oa6Wd69_nt2Ve4U.html

@danijeldzakula8709 5 ай бұрын

Thanks a lot for the video 🖐

@hamedbahram 5 ай бұрын

My pleasure!

@kiefer8101 5 ай бұрын

great stuff!

@hamedbahram 5 ай бұрын

Thanks! Appreciate that.

@bonadio60 2 ай бұрын

Nice content! Thanks

@hamedbahram 2 ай бұрын

Thank you! I appreciate that.

@kianooshsoleimani5472 2 ай бұрын

dear hamed, please if it is possible made a video about showing notification or something in the form server actions ...

@hamedbahram 2 ай бұрын

For sure! I've done it in some of the projects related to server actions, but I'll have that in mind.

@marcosduong 6 ай бұрын

Amazing!!

@hamedbahram 6 ай бұрын

Thank you.

@marcosduong 6 ай бұрын

Keep going. I have learned a lot of knowledge from your channel. Thank you very much, Hamed Bahram !!🎉

@hamedbahram 6 ай бұрын

@@marcosduong I appreciate that Marcos.

@karacan2469 3 ай бұрын

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

@hamedbahram 3 ай бұрын

You're welcome. I totally understand, TS makes it more complex for beginners. I have a lot of JS videos as well, but recently doing more TS.

@karacan2469 3 ай бұрын

@@hamedbahram as a beginner I am involving lots of lanuages from Motoko to Solidy from python to Javacript and Rust and learning a new TypeScript is another headache for me I think I will never be able to be a real developer if I dont limit myself with just a couple of them, maybe I am wrong, actually I cant stop myself watching your videos you are a very good in the way you teach.

@mobinans8558 7 ай бұрын

Awesome

@hamedbahram 7 ай бұрын

🫡

@aguud 5 ай бұрын

nice video

@hamedbahram 5 ай бұрын

Thanks!

@mathiasriissorensen6994 4 ай бұрын

This was brilliant and I learned a lot. Thank you! How can we connect the store with a database?

@hamedbahram 4 ай бұрын

Glad to hear that! You're welcome. You can use a middleware to persist state, read more here → docs.pmnd.rs/zustand/integrations/persisting-store-data

@mathiasriissorensen6994 4 ай бұрын

Thank you! 🙏🏼@@hamedbahram

@SaMi-kv6yi 2 ай бұрын

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

@hamedbahram 2 ай бұрын

Glad to hear that. The font is called Operator mono.

@simonaedwards 14 күн бұрын

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?

@hamedbahram 14 күн бұрын

Thanks for noting that, I looked at it and it's a bit different from our implementation in that it shares the store via context. I'd have dig a bit deeper to understand why this is.

@sagarchilivery6112 7 ай бұрын

I wish it had cool drag and drop animation like react-beautiful-dnd

@hamedbahram 7 ай бұрын

That'll be for the part II of this video :)

@raghavdholu302 7 ай бұрын

really loved your exlpanatoin. also how can i get that font for my vscode

@hamedbahram 7 ай бұрын

Thanks! The font is Operator mono.

@isaacfrishman7487 Күн бұрын

Not to distract from the incredible video and explanation of this all, but what theme or config does your vsCode have that gives you the cursive fonts on keywords?

@hamedbahram Күн бұрын

Hey, no worries! I’m using Dark+ Italic theme and my font is Operator mono.

@deepeshsharma7508 5 ай бұрын

Thanks buddy this was great video but i have a doubt that when you fetch data from an API on SSC and you want to send that data to store at that point we cant use any hook on SSC how could we do that ?

@hamedbahram 5 ай бұрын

I'm not sure if I understood the question! What did you mean by SSC?

@mohdsahil226 7 ай бұрын

Thanks again for a great tutorial. Would you please make a video on Typescript in Next.js. There is no tutorial which tell how to setup typescript lint in nexj.js. event if I remove the type and run lint. it doesn't catch the typescript type error. Would you please help?

@hamedbahram 7 ай бұрын

I do have a video on TS → kzfaq.info/get/bejne/jtOHetSaldbXm4k.htmlsi=yfWsKS-VS-nLG2SS

@nvictorme 7 ай бұрын

Honest question: why do you need a client side state manager (Zustand) whilst using an RSC based framework?

@hamedbahram 7 ай бұрын

Good question! You don't necessarily need a client-side state manager.

@nvictorme 7 ай бұрын

I might be missing the use-case for this. Maybe for ephemeral states like order items in a shopping cart or product customization.

@hamedbahram 7 ай бұрын

@@nvictorme Yes that can be the usecase.

@AyanGhosh-vj7ui 2 ай бұрын

♥

@hamedbahram 2 ай бұрын

❤️

@atifali3485 5 ай бұрын

hi i was creating something similar using context api, so i get hydration error on initial load coz on my client side data rendered based on localStage value.. how do i fix?

@hamedbahram 5 ай бұрын

Read your local storage inside `useEffect`

@WatashiwaWatashi-zw7hy 2 ай бұрын

Hi why in my side the state is late to update ya? I mean when I refresh the page the data is still empty but in a second the data would be appear. so maybe it will be trouble later

@hamedbahram 2 ай бұрын

Not sure why that is, clone my code and compare to yours to see what you're doing differently.

@RichardWalterLanda 3 ай бұрын

everythign is perfect, thank you for your video. The only question that comes to my mind is: Do you actually need typescript? There are good features from ts that could really help in big projects with types etc. but I noticed that you are doing sometimes too much extra work. Instead of just throw some children to the component, you have to go and define them as node or something else. Is it really that necessary for the real project?

@hamedbahram 3 ай бұрын

Thank you! I agree TS adds some overhead when developing but it ultimately pays off when catching potential bugs in your code before deploying.

@frontend_ko 2 ай бұрын

thanks for video. i feel like web development experience for csr + ssr is quite complex and confusing. it's certain that next 14 isn't the perfect tool

@hamedbahram 2 ай бұрын

Don't think of it as csr or ssr, think in terms of what you want to build, the functionality you want to have , and let the tool take care of the underlying details. I think NextJs 14 is awesome.