In this post, I’ll explain how to use Zustand in a Next.js project. Zustand — what is it? According to their documentation: “A small, fast and scalable bearbones state-management solution using…

Roberto Umbelino

Figma

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Learn how to use Zustand, a simple and scalable state management solution, in a Next.js project with TypeScript. The post guides you through setting up a new project, integrating Zustand, and creating a state store. It also covers adding actions to manage the state and persisting state data using localStorage.

Zustand in Next.js 14 (with ts)

Now we’re ready to develop our first page

Man zustand is so hyped 44k+ stars on github shows how many people prefer it. Sad to see redux old school getting ditched.

I have been using Zustand for a project for 2 months. Absolutely amazing, I recommend you a lot if you didn’t find your place with redux and the useContext !

Lazy writing, he just copy pasted the code from the official documentation.

My confusion with zustand and other state management tools is with Next. I am still finding it difficult to know where and why we need it, specially when we are trying to keep as much as possible as a server component/action. For which we don’t need state management.