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?
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.
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
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.
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.
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?
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 ?
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?
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
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 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.
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?
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!
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!
zustand is so good and simple I love it
Absolutely!
What a surprise hamed! I was doing the same Kanban board task too. Cool
Cool 🙌🏼
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 😅
Man, I have no words to say thank you. Cheers from Brazil!
My pleasure, man! I appreciate it.
Banger! Thank you for your consistent hardwork
My pleasure! I appreciate that.
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
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💡
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.
Terrific topic and tutorial. Thanks
Appreciate it! Glad it was helpful!
Your tutorials are very helpful, thank you.
Glad to hear that!
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.
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.
Thanks a lot for the video 🖐
My pleasure!
great stuff!
Thanks! Appreciate that.
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.
great content!
Thank you!
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.
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
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.
Nice content! Thanks
Thank you! I appreciate that.
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.
I wish it had cool drag and drop animation like react-beautiful-dnd
That'll be for the part II of this video :)
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.
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.
Awesome
🫡
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.
nice video
Thanks!
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.
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?
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.
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.
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)
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.
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.
really loved your exlpanatoin. also how can i get that font for my vscode
Thanks! The font is Operator mono.
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`
♥
❤️
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
What about if i want to use redux for state management?
It'd be pretty similar to this.