Next.js & State Management: A Beginner’s Guide with Zustand

Written by

learnmodernwebdevelopment

in

In the world of web development, managing state effectively is crucial for building dynamic and interactive user interfaces. As applications grow in complexity, keeping track of data becomes increasingly challenging. This is where state management libraries come into play. They provide a structured way to handle and update application data, ensuring consistency and predictability. While options like Redux and Context API are popular, they can sometimes feel overly complex for smaller or medium-sized projects. This is where Zustand shines. Zustand is a small, fast, and unopinionated state management library for React, and it’s particularly well-suited for Next.js applications.

Why Zustand?

Zustand offers several advantages:

  • Simplicity: Zustand has a straightforward API, making it easy to learn and use.
  • Performance: It’s designed to be lightweight and efficient, minimizing performance overhead.
  • Unopinionated: Zustand doesn’t dictate how you structure your application, giving you flexibility.
  • Minimal Boilerplate: You can often achieve complex state management with less code compared to other libraries.
  • Hooks-Based: It leverages React hooks, making it familiar to React developers.

This tutorial will guide you through the process of integrating Zustand into your Next.js project, demonstrating its core concepts with practical examples. We’ll cover setting up a store, updating state, and accessing state within your components. By the end, you’ll be able to confidently manage state in your Next.js applications using Zustand.

Setting Up Your Next.js Project

If you don’t already have one, create a new Next.js project using the following command:

npx create-next-app zustand-tutorial
cd zustand-tutorial

Once your project is set up, you’ll need to install Zustand. Navigate to your project directory in the terminal and run:

npm install zustand
# or
yarn add zustand
# or
pnpm install zustand

Creating Your First Zustand Store

The core concept of Zustand is the store. A store holds your application’s state and provides methods to update it. Let’s create a simple store to manage a counter. Create a new file named store.js (or any name you prefer) in a directory like /store in your project’s root:

// store.js
import { create } from 'zustand'

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

export default useCounterStore;

Let’s break down what’s happening here:

  • create: This function from Zustand is used to create a store.
  • set: This function is provided by Zustand and is used to update the state. It takes an object or a function as an argument. If you pass an object, it merges the object into the state. If you pass a function, it receives the current state as an argument and should return an object with the updated state.
  • count: 0: This initializes the state with a count property set to 0.
  • increment, decrement, reset: These are actions (or methods) that modify the state. They use the set function to update the count.

Using the Store in a Component

Now, let’s use the store in a React component. Open pages/index.js and modify it as follows:

// pages/index.js
import useCounterStore from '../store';

function HomePage() {
  const count = useCounterStore((state) => state.count);
  const increment = useCounterStore((state) => state.increment);
  const decrement = useCounterStore((state) => state.decrement);
  const reset = useCounterStore((state) => state.reset);

  return (
    <div style={{ textAlign: 'center', padding: '20px' }}>
      <h1>Zustand Counter Example</h1>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

export default HomePage;

Here’s what’s happening:

  • Importing the Store: We import the useCounterStore from ../store.
  • Accessing State and Actions: We use the store like a custom hook. We pass a selector function (e.g., (state) => state.count) to useCounterStore to select the specific pieces of state we need. The hook automatically re-renders the component whenever the selected state changes.
  • Rendering the UI: We display the count and provide buttons to trigger the increment, decrement, and reset actions.

Run your Next.js development server (npm run dev or yarn dev or pnpm dev) and navigate to http://localhost:3000. You should see a counter that you can increment, decrement, and reset.

Adding More Complex State

Let’s expand our example to include a text input and store some text. Modify store.js:

// store.js
import { create } from 'zustand';

const useCounterStore = create((set) => ({
  count: 0,
  text: '',
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
  setText: (newText) => set({ text: newText }),
}));

export default useCounterStore;

We’ve added:

  • text: '': A new state property to hold the text.
  • setText: An action to update the text.

Now, update pages/index.js:

// pages/index.js
import useCounterStore from '../store';

function HomePage() {
  const count = useCounterStore((state) => state.count);
  const increment = useCounterStore((state) => state.increment);
  const decrement = useCounterStore((state) => state.decrement);
  const reset = useCounterStore((state) => state.reset);
  const text = useCounterStore((state) => state.text);
  const setText = useCounterStore((state) => state.setText);

  const handleTextChange = (e) => {
    setText(e.target.value);
  };

  return (
    <div style={{ textAlign: 'center', padding: '20px' }}>
      <h1>Zustand Counter and Text Example</h1>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
      <br />
      <input
        type="text"
        value={text}
        onChange={handleTextChange}
        style={{ marginTop: '10px' }}
      />
      <p>Text: {text}</p>
    </div>
  );
}

export default HomePage;

Here, we added:

  • Accessing text and setText: We select the text state and the setText action from the store.
  • handleTextChange: A function to update the text state when the input changes.
  • Input Field: An input field to allow the user to enter text, which updates the state.

Now, when you refresh your page, you should see a text input field, and the text you type will be displayed below it. The counter functionality remains as before.

Persistence with Zustand

By default, Zustand stores state in memory. This means that when the user refreshes the page or navigates away, the state is lost. To persist state, you can use middleware. A common and easy way to persist state is with zustand/middleware‘s persist middleware. First, install the package:

npm install zustand/middleware
# or
yarn add zustand/middleware
# or
pnpm install zustand/middleware

Then, modify store.js:

// store.js
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useCounterStore = create(persist((set) => ({
  count: 0,
  text: '',
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
  setText: (newText) => set({ text: newText }),
}), {
  name: 'counter-storage',
}));

export default useCounterStore;

Here’s what changed:

  • Imported persist: We import the persist middleware from zustand/middleware.
  • Wrapped the Store: We wrap the store’s configuration with persist().
  • name Option: We provide a name option to persist(). This is the key used to store the state in local storage.

Now, when the user refreshes the page, the counter and text input values will be restored from local storage. Zustand will automatically handle the serialization and deserialization of the state.

Advanced Usage: Using Actions with Asynchronous Operations

Zustand works seamlessly with asynchronous operations, such as fetching data from an API. Let’s create an example that fetches a random number from an API and updates the state. First, modify store.js:

// store.js
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useCounterStore = create(persist((set) => ({
  count: 0,
  text: '',
  randomNumber: null,
  isLoading: false,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
  setText: (newText) => set({ text: newText }),
  fetchRandomNumber: async () => {
    set({ isLoading: true });
    try {
      const response = await fetch('https://www.random.org/integers/?num=1&min=1&max=100&col=1&base=10&format=plain&rnd=new');
      const data = await response.text();
      const randomNumber = parseInt(data, 10);
      set({ randomNumber, isLoading: false });
    } catch (error) {
      console.error('Error fetching random number:', error);
      set({ isLoading: false });
    }
  },
}), {
  name: 'counter-storage',
}));

export default useCounterStore;

We’ve added the following:

  • randomNumber: A new state property to store the fetched random number.
  • isLoading: A state property to indicate whether the data is being fetched.
  • fetchRandomNumber: An asynchronous action that fetches a random number from the random.org API, sets isLoading to true while fetching, updates randomNumber upon success, and sets isLoading back to false in both success and error scenarios.

Now, modify pages/index.js:

// pages/index.js
import useCounterStore from '../store';

function HomePage() {
  const count = useCounterStore((state) => state.count);
  const increment = useCounterStore((state) => state.increment);
  const decrement = useCounterStore((state) => state.decrement);
  const reset = useCounterStore((state) => state.reset);
  const text = useCounterStore((state) => state.text);
  const setText = useCounterStore((state) => state.setText);
  const randomNumber = useCounterStore((state) => state.randomNumber);
  const isLoading = useCounterStore((state) => state.isLoading);
  const fetchRandomNumber = useCounterStore((state) => state.fetchRandomNumber);

  const handleTextChange = (e) => {
    setText(e.target.value);
  };

  return (
    <div style={{ textAlign: 'center', padding: '20px' }}>
      <h1>Zustand Counter, Text, and Random Number Example</h1>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
      <br />
      <input
        type="text"
        value={text}
        onChange={handleTextChange}
        style={{ marginTop: '10px' }}
      />
      <p>Text: {text}</p>
      <button onClick={fetchRandomNumber} disabled={isLoading}>
        {isLoading ? 'Loading...' : 'Fetch Random Number'}
      </button>
      {randomNumber !== null && <p>Random Number: {randomNumber}</p>}
    </div>
  );
}

export default HomePage;

Here, we’ve added:

  • Accessing randomNumber, isLoading, and fetchRandomNumber: We select these from the store.
  • Button to Fetch: A button that calls fetchRandomNumber when clicked.
  • Loading State: The button is disabled while isLoading is true.
  • Displaying the Random Number: The random number is displayed once it’s fetched.

When you refresh the page, you’ll see a button to fetch a random number. Clicking the button will trigger the API request, and the random number will be displayed once the request completes. The button will be disabled during the loading phase.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them when using Zustand:

  • Incorrect Selectors: When using useCounterStore, make sure your selector functions correctly. For example, using useCounterStore(state.count) instead of useCounterStore((state) => state.count) will lead to unexpected behavior because it won’t trigger re-renders when count changes. Always use the arrow function syntax to select specific state properties.
  • Forgetting to Import the Store: Ensure you import your store correctly in your components. A simple typo in the import path can cause issues.
  • Incorrectly Using Actions: Remember that actions are functions. Make sure you call them correctly (e.g., increment(), not increment) and pass any required arguments.
  • Not Using Selectors for Performance: If you’re only interested in a specific part of the state, always use selectors to avoid unnecessary re-renders. Without selectors, your component will re-render whenever *any* part of the state changes.
  • Misunderstanding Persistence: When using persist, ensure you understand how the data is stored (usually in local storage). Be mindful of the data you’re storing, especially sensitive information. Consider encryption or other security measures if needed.

Key Takeaways

  • Zustand is a simple and efficient state management library for React and Next.js.
  • It uses a straightforward API based on hooks.
  • Stores are created using the create function.
  • State is updated using the set function within actions.
  • You can select specific state values and actions in your components using selectors.
  • The persist middleware allows you to easily persist the state.
  • Zustand is well-suited for both small and medium-sized Next.js projects where you want a lightweight and easy-to-use solution for managing state.

FAQ

  1. Is Zustand better than Redux? It depends on the project. Redux is more feature-rich and suitable for very large and complex applications. Zustand is generally simpler and faster to get started with, making it a good choice for smaller to medium-sized projects. Consider your project’s complexity and your team’s familiarity with each library.
  2. How does Zustand compare to the Context API? Zustand often provides a more structured and easier-to-manage approach to state compared to the raw Context API, especially as your application grows. Zustand simplifies the process of updating state and provides a more concise API. However, the Context API is a built-in React feature, so it doesn’t require any external dependencies.
  3. Can I use Zustand with TypeScript? Yes, Zustand is fully compatible with TypeScript. You can define types for your state and actions to improve type safety and code maintainability.
  4. How do I reset the persisted state? You can use the persist.clear() method to clear the persisted state. You’ll need to import this from the zustand/middleware package. For example: import { persist, create } from 'zustand/middleware'; and then call useCounterStore.persist.clear(). Be cautious about when and where you call this, as it will erase the stored data.

This tutorial has shown you how to integrate Zustand into your Next.js project and manage state effectively. By understanding the core concepts and practicing with the examples, you can build dynamic and interactive web applications with ease. Remember to experiment and explore the library’s capabilities further to discover how it can best suit your needs. With its simplicity, performance, and flexibility, Zustand is a valuable tool in any Next.js developer’s toolkit, allowing you to create more maintainable and efficient applications.

More posts