How to Build a Kanban Board Using Zustand in NextJs 14
If you are a developer looking to build a Kanban board using Zustand in NextJs 14, you’ve come to the right place. Zustand is a small, fast, and reactive state management library that can be easily integrated into your NextJs project. In this article, we will walk you through the steps of building a Kanban board using Zustand in NextJs 14.
Step 1: Set up a NextJs 14 project
First, you’ll need to set up a NextJs 14 project. You can do this by running the following command in your terminal:
npx create-next-app@14 my-kanban-boardThis will create a new NextJs 14 project with the name “my-kanban-board”. Navigate into the project folder with cd my-kanban-board.
Step 2: Install Zustand
Next, you’ll need to install Zustand in your project. You can do this by running the following command in your terminal:
npm install zustandThis will install Zustand and add it to your project’s dependencies.
Step 3: Create the Kanban board components
Now it’s time to create the components for your Kanban board. You can start by creating a new file called “KanbanBoard.js” in the components folder of your NextJs 14 project. In this file, you can define the structure and layout of your Kanban board using HTML and React components.
Step 4: Use Zustand to manage the board state
Once you have your Kanban board components in place, you can use Zustand to manage the state of the board. You can create a new file called “boardState.js” where you will define your Zustand store for managing the board state, such as lists of tasks, their statuses, and any other relevant data.
Step 5: Connect Zustand to the Kanban board components
Finally, you’ll need to connect Zustand to your Kanban board components. You can do this by importing the Zustand store you created in “boardState.js” and using its state and actions to update the board components based on user interactions and changes in the board state.
That’s it! By following these steps, you can build a Kanban board using Zustand in NextJs 14. Zustand’s simplicity and reactivity make it a great choice for managing the state of your Kanban board, and its integration with NextJs 14 allows for a seamless development experience.
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
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?
really loved your exlpanatoin. also how can i get that font for my vscode
Great video and explanations etc, but this project is actually the kind that I would say you should use React + Vite, as opposed to Next, as this is something that is completely interactive, it could all be done with React, and connect to a DB such as Convex to have a backend, and can use Auth0 to have authentication as well, fairly easily.
Honest question: why do you need a client side state manager (Zustand) whilst using an RSC based framework?
Terrific topic and tutorial. Thanks
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 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 🤣🙏🏻
Awesome
zustand is so good and simple I love it
I wish it had cool drag and drop animation like react-beautiful-dnd
Very Cool 🙂 Thanks
You're probably the best guy to teach web dev. Thanks for the effort you put in to spread knowledge.
What a surprise hamed! I was doing the same Kanban board task too. Cool