Does Zustand work with Next.js App Router?

Yes, Zustand works with the App Router. However, since stores are global, you need to be careful when using them in Server Components to avoid sharing state between requests. The recommended approach is to create a store per request using a Context Provider.

How to use Zustand in Server Components?

You cannot use Zustand hooks directly in Server Components. Instead, you should fetch data in the Server Component and pass it as props to a Client Component, or initialize a store in a Client Component provider.

Using Zustand with Next.js App Router

A complete guide to Server Components, SSR, and avoiding global state pollution.

The Challenge: Global State vs. SSR

In a Single Page Application (SPA), a global store variable is fine. But in Next.js (SSR), global variables are shared across all requests on the server. This means one user's data could accidentally leak to another user if you aren't careful.

Warning: Do not define a global store using `create()` if you plan to initialize it with data from the server.

The Solution: Store Provider Pattern

To ensure isolation, we create a new store instance for each request (or component tree) using React Context.

1. Create the Store Factory

// src/stores/counter-store.ts
import { createStore } from 'zustand/vanilla'

export type CounterState = {
  count: number
}

export type CounterActions = {
  decrementCount: () => void
  incrementCount: () => void
}

export type CounterStore = CounterState & CounterActions

export const defaultInitState: CounterState = {
  count: 0,
}

export const createCounterStore = (initState: CounterState = defaultInitState) => {
  return createStore<CounterStore>()((set) => ({
    ...initState,
    decrementCount: () => set((state) => ({ count: state.count - 1 })),
    incrementCount: () => set((state) => ({ count: state.count + 1 })),
  }))
}

2. Create the Provider

// src/providers/counter-store-provider.tsx
'use client'

import { type ReactNode, createContext, useRef, useContext } from 'react'
import { useStore } from 'zustand'
import { type CounterStore, createCounterStore } from '@/stores/counter-store'

export type CounterStoreApi = ReturnType<typeof createCounterStore>

export const CounterStoreContext = createContext<CounterStoreApi | undefined>(
  undefined,
)

export interface CounterStoreProviderProps {
  children: ReactNode
}

export const CounterStoreProvider = ({
  children,
}: CounterStoreProviderProps) => {
  const storeRef = useRef<CounterStoreApi>(null)
  if (!storeRef.current) {
    storeRef.current = createCounterStore()
  }

  return (
    <CounterStoreContext.Provider value={storeRef.current}>
      {children}
    </CounterStoreContext.Provider>
  )
}

export const useCounterStore = <T,>(
  selector: (store: CounterStore) => T,
): T => {
  const counterStoreContext = useContext(CounterStoreContext)

  if (!counterStoreContext) {
    throw new Error(`useCounterStore must be used within CounterStoreProvider`)
  }

  return useStore(counterStoreContext, selector)
}

3. Use in Layout or Page

// app/layout.tsx
import { CounterStoreProvider } from '@/providers/counter-store-provider'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <CounterStoreProvider>
          {children}
        </CounterStoreProvider>
      </body>
    </html>
  )
}