Amazing Tutorial. you nailed it.. as a fullstack developer I am proud to see someone from my homeland how amazingly get his knowledge across and spread his knowledge... Amazing. Congrats man.
I'm new to web development world. And by far you have been the most helpful person in my researchs and learnings... Thanks and please do keep up the good work
I searched for nextjs + zustand and a lot of tutorials came up and when I saw your pic on the thumbnail and I clicked right away. I really wanna say I love your way of teaching. I also wanted to highlight a problem in some of your videos that the audio and video are not synced somehow.
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 !
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 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.
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?
Hey Hamed, thanks for the great explanation! I have a question: what’s the best practice for using Zustand in a large production-grade application? Should I use one global store or separate stores for different types?
That's a new addition to the docs after the time of this recording. I would follow the docs. I will make an updated video at some point discussing it later.
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.
Yes the store will be initialized on the server and then again on the client and if the two aren't the same you'll get a hydration error. With the app router architecture I find myself using global state management tools less and utilizing the URL state more.
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?
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.
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?
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
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 ?
Great video, but I believe you unnecessarily type again your actions in your useTaskStore, I think they are already typed thanks to your create function. Even your IntelliSense properly recognize the type when you type it again.
Do you think the App Router is still a good choice for apps that don't do any server stuff themselves? Like connecting to an external BFF and interacting with it through client components?
Absolutely! First of all, the app router is not just for using server components, there is nothing wrong with using client components at all. Secondly, even client-side apps have parts that are static and can be served from the server like layouts, with new features like partial pre-rendering I think the app router is the way to go no matter what.
I'm new and I ran into a problem where Header should be a server component because I need to use another server component (ShoppingCart) inside the client component and because of this absolutely everything is marked as dynamic after the build, is this a bad practice?
Using server components doesn't mean dynamic unless you're using dynamic functions such as `cookies` and `headers` which are request specific. I can't really judge if you're implementation is good or bad with this limited knowledge.
@hamedbahram I use a session-based shopping cart cause I do not have user authentication, and it was the only way to save cart data after closing the browser. And it looks like this: (server component as it's async) (client component)
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?
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?
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
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?
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
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.
I understand that it makes it harder to follow/understand if you're a beginner. I use to have all the videos in JS, but everyone kept asking for TS so I switched over.
Большое спасибо за этот урок. Наконец то я узнал как пользоваться localstorage в zustand в nextjs
Glad it was helpful!
You're probably the best guy to teach web dev. Thanks for the effort you put in to spread knowledge.
My pleasure! Glad you think so.
I agree! Great teaching style. Looking forward to more content in 24.
@@wibbs88 Thanks! for sure!
Amazing Tutorial. you nailed it.. as a fullstack developer I am proud to see someone from my homeland how amazingly get his knowledge across and spread his knowledge... Amazing. Congrats man.
My pleasure!
This is one of those videos where you understand EVERYTHING in a perfectly way. Thank you for being a great teacher.
Glad it was helpful! I appreciate the kind words.
I'm new to web development world. And by far you have been the most helpful person in my researchs and learnings... Thanks and please do keep up the good work
Glad to hear that! Welcome onboard.
Man, I have no words to say thank you. Cheers from Brazil!
My pleasure, man! I appreciate it.
You're really best youtube web-dev teacher. I just love it!
Thank you! 😃
Very helpful for using zustand in my Next14AppRouter project! Thank you for creating this great video! From an engineer in Japan
Thanks for tuning in and you're very welcome!
I searched for nextjs + zustand and a lot of tutorials came up and when I saw your pic on the thumbnail and I clicked right away. I really wanna say I love your way of teaching.
I also wanted to highlight a problem in some of your videos that the audio and video are not synced somehow.
Thanks for the kind words and appreciate the feedback! I'll check the video audio and get that sorted out.
When I see this handsome man smiling on a thumbnail, I already know that I'm about to get even better at using Nextjs
Thanks Kyle 😎 I appreciate that!
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 🤣🙏🏻
My pleasure! Glad it was useful! Right on schedule 😅
What a surprise hamed! I was doing the same Kanban board task too. Cool
Cool 🙌🏼
zustand is so good and simple I love it
Absolutely!
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 !
My pleasure! Glad it was helpful.
Banger! Thank you for your consistent hardwork
My pleasure! I appreciate that.
Terrific topic and tutorial. Thanks
Appreciate it! Glad it was helpful!
That's great, exactly what I was looking for, and besides, can you tell me the "fontFamily" of vsCode in the video?
Glad to hear that. The font is called Operator mono.
Your tutorials are very helpful, thank you.
Glad to hear that!
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
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.
@@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.
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
That's a great idea💡
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?
I'm glad you've found the videos useful. You can watch this video for data tables → ua-cam.com/video/kHfDLN9w1KQ/v-deo.html
Thanks a lot for the video. It helped me setup persistent zustand.
Glad to hear that!
superb tutorial, as all your content is! thank you!
You're welcome! I appreciate that.
Thank you so much, this was so helpful ❤
You're welcome! I'm glad it was helpful.
This was brilliant and I learned a lot. Thank you!
How can we connect the store with a database?
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
Thank you! 🙏🏼@@hamedbahram
Hey Hamed, thanks for the great explanation! I have a question: what’s the best practice for using Zustand in a large production-grade application? Should I use one global store or separate stores for different types?
Unrelated state can live in separate stores.
great stuff!
Thanks! Appreciate that.
What about the NextJS recommendation from the zustand documentation? There they use React Context with zustand. Is that not necessary?
That's a new addition to the docs after the time of this recording. I would follow the docs. I will make an updated video at some point discussing it later.
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.
Yes the store will be initialized on the server and then again on the client and if the two aren't the same you'll get a hydration error. With the app router architecture I find myself using global state management tools less and utilizing the URL state more.
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?
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.
Thanks a lot for the video 🖐
My pleasure!
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?
Hey, no worries! I’m using Dark+ Italic theme and my font is Operator mono.
dear hamed, please if it is possible made a video about showing notification or something in the form server actions ...
For sure! I've done it in some of the projects related to server actions, but I'll have that in mind.
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
Valid point. The new pattern is an addition to the zustand docs after the time of this recording.
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 ?
I'm not sure if I understood the question! What did you mean by SSC?
Great video, but I believe you unnecessarily type again your actions in your useTaskStore, I think they are already typed thanks to your create function. Even your IntelliSense properly recognize the type when you type it again.
Hmm.. I'd have to look at it again.
great content!
Thank you!
Honest question: why do you need a client side state manager (Zustand) whilst using an RSC based framework?
Good question! You don't necessarily need a client-side state manager.
I might be missing the use-case for this. Maybe for ephemeral states like order items in a shopping cart or product customization.
@@nvictorme Yes that can be the usecase.
Do you think the App Router is still a good choice for apps that don't do any server stuff themselves? Like connecting to an external BFF and interacting with it through client components?
Absolutely! First of all, the app router is not just for using server components, there is nothing wrong with using client components at all. Secondly, even client-side apps have parts that are static and can be served from the server like layouts, with new features like partial pre-rendering I think the app router is the way to go no matter what.
really loved your exlpanatoin. also how can i get that font for my vscode
Thanks! The font is Operator mono.
Amazing!!
Thank you.
Keep going. I have learned a lot of knowledge from your channel. Thank you very much, Hamed Bahram !!🎉
@@marcosduong I appreciate that Marcos.
I'm new and I ran into a problem where Header should be a server component because I need to use another server component (ShoppingCart) inside the client component and because of this absolutely everything is marked as dynamic after the build, is this a bad practice?
Using server components doesn't mean dynamic unless you're using dynamic functions such as `cookies` and `headers` which are request specific. I can't really judge if you're implementation is good or bad with this limited knowledge.
@hamedbahram
I use a session-based shopping cart cause I do not have user authentication, and it was the only way to save cart data after closing the browser.
And it looks like this:
(server component as it's async)
(client component)
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?
I do have a video on TS → ua-cam.com/video/XmWGqi0pskU/v-deo.htmlsi=yfWsKS-VS-nLG2SS
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?
Read your local storage inside `useEffect`
Nice content! Thanks
Thank you! I appreciate that.
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
Not sure why that is, clone my code and compare to yours to see what you're doing differently.
Hello, you need to wrap the store with context otherwise you share what inside the store with different user. Check the docs...
That wasn't the case at the time of this recording; However, there is a new update in the way Zustand works and should be implemented in NextJs.
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?
Thank you! I agree TS adds some overhead when developing but it ultimately pays off when catching potential bugs in your code before deploying.
I wish it had cool drag and drop animation like react-beautiful-dnd
That'll be for the part II of this video :)
nice video
Thanks!
Awesome
🫡
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
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.
What about if i want to use redux for state management?
It'd be pretty similar to this.
♥
❤️
Thanks a lot. why we should use Next js for this applications? i think Next js is not a good choice for this application
This video shows how to use global state management in NextJs. You can use whatever you feel better suited.
but it was better to choose a project that make sense to use NextJS@@hamedbahram
It's not the best idea to use TypeScript in a tutorial video; most of the time is spent on typing and everything related to it.
I understand that it makes it harder to follow/understand if you're a beginner. I use to have all the videos in JS, but everyone kept asking for TS so I switched over.