Nextjs
Published in

Nextjs

How to config the zustand state management tool into nextjs?
Zustand is a state management tool for reactjs ecosystem

How to config the zustand state management tool into nextjs?

Zustand provides the easiest way to handle the state management in the react.js ecosystem.

Zustand provides an easier way to handle the state of the entire app. The beauty of zustand is that it writes less code to compare redux.

What is zustand

Zustand is an open-source state management library for reactjs. It is a tiny, fast and scalable state management library for react ecosystem. zustand provides an inbuilt hook that helps you access and changes the state with the component.

Demo code

Let start the zustand intergation

Steps

  1. Install nextjs
  2. Install Zustand
  3. Create a store with the first method (Easy)
  4. Create a store with a second method (Hard)
  5. Run dev server

Folder structure

.
├── Components
│ └── Header.js
├── icons
│ ├── moon-30.png
│ ├── redux.svg
│ └── sun-24.png
├── next.config.js
├── package.json
├── package-lock.json
├── pages
│ ├── about.js
│ ├── api
│ │ └── hello.js
│ ├── _app.js
│ ├── _document.js
│ └── index.js
├── public
│ ├── favicon.ico
│ └── vercel.svg
├── README.md
├── store
│ └── store.js
├── styles
│ └── globals.css
└── yarn.lock
7 directories, 18 files

Install nextjs

Firstly, you install nextjs with the following command.

npx create-react-app my-app

If you already install nextjs in your project, then skip this section.

Install Zustand

You install the zustand library in your nextjs project in the second step.

npm install zustandoryarn add zustandorpnpm add zustand

After installing zustand, now choose one method for configuring the zustand store. The first method is straightforward, and I highly recommended to use the First method in the next app. I’m more focused on the first method and built a dark mode demo project with nextjs and zustand.

Create a store with the first method (Easy)

In the third step, you create a store in the project folder. I make a store folder in the nextjs root level folder. It is a straightforward way to access the store in zustand.

First, import the create method from the zustand library.

import create from 'zustand'

The create method help to create a store for the nextjs project.

// store/store.jsimport create from 'zustand'// create storeconst useStore = create((set) => ({color: 'white',changeColor: () => set((state) =>  ({ color: state.color === 'white' ? '#212529' : 'white'}))}))export default useStore

Inside the store, I make two methods first is color and the second is changeColor.

How to use the store?

First, you import the store form store/store.js you recently created in your app.

import useStore from "../store/store";

The useStore is a react custom hook provide by zustand library. You use a hook inside the function component.

const color = useStore((state) => state.color)const changeColor = useStore((state) => state.changeColor)

Help of useStore you access your state in your component.

<div onClick={changeColor} className='iconBox'>..rest code..</div><h1> {color} </h1>
  • color is a variable
  • changeColor is a function; you can call the functions on onClick, onChange, etc.

Now you run the npm run dev command.

Play online with my demo code on GitHub

Create a store with a second method (Hard)

You can also config the zustand in your nextjs app with the zustand provider. you wrap the _app.js component with createContext.

Replace the _app.js with this code and set your store inside the createStore method

How to use the store?

Firstly import the useStore and useContext on the component page.

import { useContext } from 'react'
import { useStore } from 'zustand'

After influential the useStore and useContact, you access your state in component with the useContext and useStore hook.

function Home(){const store = useContext(StoreContext)const slice = useStore(store, selector)....}

Note

The second method is complex; maybe it confuses you with the more extensive website. I suggest using the first method. It helps to write a clean code, and you can easily finger out where it is stored and what happened with my store.

Run dev server

In the end step, you follow the first or second ways to implement the code and run the npm dev command.

Conclusion

Zustand is a super cool library for state management in react ecosystem. The cool thing is you write significantly less code as compared to redux. You use redux in your app. The code is soo messy. But in zustand, your app code is clean and well structured.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

Rajdeep singh

525 Followers

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/