Zustand for client state in NextJS - Mini Project: Build & Apply

Zustand for client state

📖 Scenario: You are building a simple Next.js app that tracks a counter value on the client side. You want to use Zustand, a lightweight state management library, to keep the counter state and update it from different components.

🎯 Goal: Create a Zustand store to hold a count value and functions to increment and decrement the count. Then use this store in a React component to display and update the counter.

📋 What You'll Learn

Create a Zustand store with count, increment, and decrement

Use the Zustand store in a React functional component

Display the current count value

Add buttons to call increment and decrement functions

Follow Next.js and React 19+ functional component patterns

💡 Why This Matters

🌍 Real World

Zustand is used in React and Next.js apps to manage client-side state simply and efficiently without complex setup.

💼 Career

Understanding Zustand helps frontend developers build scalable React apps with clean state management, a valuable skill in modern web development.

1

Create the Zustand store

Create a Zustand store in a file called useCounterStore.js with a state variable count initialized to 0. Also add two functions: increment and decrement that increase or decrease count by 1.

NextJS

// Your code here to create Zustand store with count, increment, decrement

Need a hint?

Use create from Zustand to define a store with count and two functions that update count.

2

Import the store and set up the component

In a React component file called Counter.js, import useCounterStore from ./useCounterStore.js. Create a functional component called Counter that uses useCounterStore to get the count value.

NextJS

import { useCounterStore } from './useCounterStore';

// Your code here to create Counter component and get count from store

Need a hint?

Use the hook useCounterStore inside the component to get the count value.

3

Add buttons to update the count

Inside the Counter component, use useCounterStore to get the increment and decrement functions. Add two buttons: one calls increment on click, the other calls decrement on click.

NextJS

import { useCounterStore } from './useCounterStore';

export default function Counter() {
  const count = useCounterStore(state => state.count);
  // Your code here to get increment and decrement and add buttons
}

Need a hint?

Get increment and decrement from the store and add buttons with onClick handlers.

4

Add accessibility and export the component

Ensure the buttons have aria-label attributes for accessibility. Export the Counter component as default. The component should show the count and two accessible buttons to change it.

NextJS

import { useCounterStore } from './useCounterStore';

// Your code here to finalize and export Counter component with accessibility

Need a hint?

Make sure the buttons have aria-label for screen readers and the component is exported as default.