Zustand com Next.js

Q: O que é o padrão Context + createStore para Next.js?

Use createStore de zustand/vanilla para criar instâncias de store (não hooks do React). Encapsule-o em um provider de Contexto React que cria uma instância por montagem (via useRef). Exponha um hook seletor tipado usando useStore(store, selector).

Q: Como passar dados buscados no servidor para um store Zustand no Next.js?

Busque dados em um Server Component e passe-os como initialState para o Client Provider. O Provider inicializa o store com esses dados na primeira renderização.

Q: Por que useRef impede que o store seja recriado em re-renderizações?

useRef mantém o mesmo valor entre renderizações sem disparar re-renderizações. O store é criado uma vez na montagem dentro da verificação if (!storeRef.current). Isso também significa que as alterações em initialState após a primeira renderização são ignoradas.

Q: Gotcha: O que acontece se o middleware persist acessar localStorage durante o SSR?

Gera um erro porque localStorage não está disponível no servidor. Proteja com typeof window !== "undefined" ou forneça um storage no-op para o servidor.

Q: Qual a diferença entre create e createStore em TypeScript?

create retorna um hook React (UseBoundStore>). createStore retorna um store vanilla (StoreApi) sem bindings do React. Use createStore + useStore(store, selector) para o padrão de provider do Next.js.

Receita

No Next.js App Router, os stores do Zustand são singletons que persistem entre requisições no servidor. Crie instâncias de store por requisição usando createStore + Context para evitar compartilhamento de estado entre usuários.

// stores/counter-store.ts
import { createStore } from "zustand/vanilla";
 
export interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
}
 
export const createCounterStore = (initialCount = 0) =>
  createStore<CounterState>((set) => ({
    count: initialCount,
    increment: () => set((s) => ({ count: s.count + 1 })),
    decrement: () => set((s) => ({ count: s.count - 1 })),
  }));
 
export type CounterStore = ReturnType<typeof createCounterStore>;

// providers/counter-provider.tsx
"use client";
 
import { createContext, useContext, useRef, ReactNode } from "react";
import { useStore } from "zustand";
import { createCounterStore, CounterState, CounterStore } from "@/stores/counter-store";
 
const CounterContext = createContext<CounterStore | null>(null);
 
export function CounterProvider({
  children,
  initialCount,
}: {
  children: ReactNode;
  initialCount?: number;
}) {
  const storeRef = useRef<CounterStore>();
  if (!storeRef.current) {
    storeRef.current = createCounterStore(initialCount);
  }
  return (
    <CounterContext.Provider value={storeRef.current}>
      {children}
    </CounterContext.Provider>
  );
}
 
export function useCounterStore<T>(selector: (state: CounterState) => T): T {
  const store = useContext(CounterContext);
  if (!store) throw new Error("useCounterStore must be used within CounterProvider");
  return useStore(store, selector);
}

Exemplo Funcional

// stores/app-store.ts
import { createStore } from "zustand/vanilla";
import { persist, createJSONStorage } from "zustand/middleware";
 
export interface AppState {
  user: { id: string; name: string; email: string } | null;
  theme: "light" | "dark";
  setUser: (user: AppState["user"]) => void;
  setTheme: (theme: AppState["theme"]) => void;
  logout: () => void;
}
 
export type AppStoreType = ReturnType<typeof createAppStore>;
 
export const createAppStore = (initState?: Partial<AppState>) =>
  createStore<AppState>()(
    persist(
      (set) => ({
        user: null,
        theme: "light",
        ...initState,
        setUser: (user) => set({ user }),
        setTheme: (theme) => set({ theme }),
        logout: () => set({ user: null }),
      }),
      {
        name: "app-storage",
        storage: createJSONStorage(() =>
          typeof window !== "undefined"
            ? localStorage
            : {
                getItem: () => null,
                setItem: () => {},
                removeItem: () => {},
              }
        ),
        partialize: (state) => ({ theme: state.theme }),
      }
    )
  );

// providers/app-provider.tsx
"use client";
 
import { createContext, useContext, useRef, ReactNode } from "react";
import { useStore } from "zustand";
import { createAppStore, AppState, AppStoreType } from "@/stores/app-store";
 
const AppStoreContext = createContext<AppStoreType | null>(null);
 
interface AppProviderProps {
  children: ReactNode;
  initialState?: Partial<AppState>;
}
 
export function AppProvider({ children, initialState }: AppProviderProps) {
  const storeRef = useRef<AppStoreType>();
  if (!storeRef.current) {
    storeRef.current = createAppStore(initialState);
  }
  return (
    <AppStoreContext.Provider value={storeRef.current}>
      {children}
    </AppStoreContext.Provider>
  );
}
 
export function useAppStore<T>(selector: (state: AppState) => T): T {
  const store = useContext(AppStoreContext);
  if (!store) throw new Error("useAppStore must be used within AppProvider");
  return useStore(store, selector);
}

// app/layout.tsx (Server Component)
import { AppProvider } from "@/providers/app-provider";
import { cookies } from "next/headers";
 
async function getServerUser() {
  const cookieStore = await cookies();
  const token = cookieStore.get("auth_token")?.value;
  if (!token) return null;
 
  const res = await fetch("https://api.example.com/me", {
    headers: { Authorization: `Bearer ${token}` },
  });
  if (!res.ok) return null;
  return res.json();
}
 
export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const user = await getServerUser();
 
  return (
    <html lang="en">
      <body>
        <AppProvider initialState={{ user }}>
          {children}
        </AppProvider>
      </body>
    </html>
  );
}

// app/dashboard/page.tsx (Server Component)
import { DashboardClient } from "./dashboard-client";
 
async function getDashboardData() {
  const res = await fetch("https://api.example.com/dashboard", {
    next: { revalidate: 60 },
  });
  return res.json();
}
 
export default async function DashboardPage() {
  const data = await getDashboardData();
  return <DashboardClient serverData={data} />;
}

// app/dashboard/dashboard-client.tsx
"use client";
 
import { useAppStore } from "@/providers/app-provider";
 
export function DashboardClient({ serverData }: { serverData: any }) {
  const user = useAppStore((s) => s.user);
  const theme = useAppStore((s) => s.theme);
 
  return (
    <div className={theme === "dark" ? "bg-gray-900 text-white" : "bg-white"}>
      <h1>Welcome, {user?.name ?? "Guest"}</h1>
      <pre>{JSON.stringify(serverData, null, 2)}</pre>
    </div>
  );
}

Análise Detalhada

Como Funciona

No Next.js App Router, os módulos são carregados uma vez no servidor e compartilhados entre todas as requisições. Um store create() em nível de módulo vazaria estado entre usuários.
createStore de zustand/vanilla cria uma instância de store sem hooks do React. Encapsulá-lo em Context + useRef garante uma instância por árvore React.
O Provider cria o store uma vez na montagem (via useRef) e nunca o recria, mesmo entre re-renderizações.
Server Components buscam dados e os passam como initialState para o Client Provider, que inicializa o store.
useStore(store, selector) do Zustand conecta um store vanilla ao React com assinaturas baseadas em seletores.
O adaptador de armazenamento do middleware persist deve lidar com o ambiente do servidor onde localStorage é indefinido.

Variações

Store singleton simples (use apenas se o vazamento de estado SSR for aceitável):

// Aceitável para estado verdadeiramente global, como feature flags que são
// iguais para todos os usuários
import { create } from "zustand";
 
export const useFeatureFlags = create<{ flags: Record<string, boolean> }>(() => ({
  flags: {},
}));

Persist seguro para hidratação com onRehydrateStorage:

createStore<State>()(
  persist(storeCreator, {
    name: "store",
    onRehydrateStorage: () => {
      return (state, error) => {
        if (error) console.error("Hydration failed:", error);
        else console.log("Hydrated:", state);
      };
    },
  })
);

Stores por rota:

// app/checkout/layout.tsx
import { CheckoutProvider } from "@/providers/checkout-provider";
 
export default function CheckoutLayout({ children }: { children: React.ReactNode }) {
  return <CheckoutProvider>{children}</CheckoutProvider>;
}
// O store só existe dentro do segmento de rota de checkout

Notas de TypeScript

Use createStore em vez de create para stores vanilla no Next.js. Os tipos são diferentes.
O padrão de provider requer a tipagem do contexto, do hook seletor e do criador de store separadamente.

import { createStore, StoreApi } from "zustand/vanilla";
import { useStore } from "zustand";
 
type MyStore = StoreApi<MyState>;
 
// Contexto tipado
const StoreContext = createContext<MyStore | null>(null);
 
// Hook seletor tipado
function useMyStore<T>(selector: (state: MyState) => T): T {
  const store = useContext(StoreContext);
  if (!store) throw new Error("Missing provider");
  return useStore(store, selector);
}

Armadilhas

Um store create() em nível de módulo no Next.js App Router compartilha estado entre todas as requisições renderizadas no servidor. O Usuário A poderia ver os dados do Usuário B. Sempre use o padrão Context + createStore para estado específico do usuário.
O middleware persist acessa localStorage na importação, o que gera um erro em ambientes de servidor. Proteja com typeof window !== "undefined" ou use um storage no-op no servidor.
Mismatches de hidratação ocorrem quando o HTML renderizado no servidor usa o estado padrão, mas o cliente hidrata com o estado persistido. Use um portão de hidratação ou suprima avisos de hidratação para diferenças conhecidas.
useRef para o store impede a recriação, mas também significa que as alterações em initialState após a primeira renderização são ignoradas. Se precisar reinicializar, use uma prop key no Provider.
Não importe hooks de Client Component (useAppStore) em Server Components. Server Components não podem usar hooks.
O callback onRehydrateStorage do middleware persist é executado após a renderização inicial. Componentes podem exibir brevemente o estado padrão.

Alternativas

Abordagem	Prós	Contras
Context + createStore	Seguro para SSR, isolamento por requisição	Mais boilerplate que singleton
create() em nível de módulo	Simples, sem necessidade de provider	Vaza estado em SSR
Redux Toolkit + next-redux-wrapper	Padrão SSR maduro	Configuração pesada e complexa
Jotai com Provider	Atômico, seguro para SSR com Provider	Paradigma diferente

FAQs

Por que não se pode usar um store `create()` em nível de módulo no Next.js App Router para estado específico do usuário?

Módulos são carregados uma vez no servidor e compartilhados entre todas as requisições.
Um store singleton vazaria o estado do Usuário A para a requisição do Usuário B.
Use o padrão Context + createStore para isolamento por requisição.

O que é o padrão Context + createStore para Next.js?

Use createStore de zustand/vanilla para criar instâncias de store (não hooks do React).
Encapsule-o em um provider de Contexto React que cria uma instância por montagem (via useRef).
Exponha um hook seletor tipado usando useStore(store, selector).

Como passar dados buscados no servidor para um store Zustand no Next.js?

Busque dados em um Server Component e passe-os como initialState para o Client Provider.
O Provider inicializa o store com esses dados na primeira renderização.

// Server Component
const user = await getServerUser();
return <AppProvider initialState={{ user }}>{children}</AppProvider>;

Por que `useRef` impede que o store seja recriado em re-renderizações?

useRef mantém o mesmo valor entre renderizações sem disparar re-renderizações.
O store é criado uma vez na montagem dentro da verificação if (!storeRef.current).
Isso também significa que as alterações em initialState após a primeira renderização são ignoradas.

Quando um store singleton simples é aceitável no Next.js?

Para estado verdadeiramente global que é o mesmo para todos os usuários (por exemplo, feature flags).
Quando o vazamento de estado SSR não é uma preocupação.
Use create() (não createStore) para este padrão mais simples.

Gotcha: O que acontece se o middleware persist acessar `localStorage` durante o SSR?

Gera um erro porque localStorage não está disponível no servidor.
Proteja com typeof window !== "undefined" ou forneça um storage no-op para o servidor.

Gotcha: Por que você pode ver um mismatch de hidratação com estado persistido?

O HTML renderizado no servidor usa o estado padrão, mas o cliente hidrata com o estado persistido (diferente).
Isso causa um mismatch. Use um portão de hidratação ou suprima avisos para diferenças conhecidas.

Como escopar um store Zustand para um segmento de rota específico?

// app/checkout/layout.tsx
export default function CheckoutLayout({ children }) {
  return <CheckoutProvider>{children}</CheckoutProvider>;
}

Coloque o provider em um layout de rota. O store só existe dentro desse segmento de rota.

Você pode importar um hook Zustand (como `useAppStore`) em um Server Component?

Não. Server Components não podem usar hooks.
Importe e use hooks Zustand apenas em Client Components marcados com "use client".

Qual a diferença entre `create` e `createStore` em TypeScript?

create retorna um hook React (UseBoundStore<StoreApi<State>>).
createStore retorna um store vanilla (StoreApi<State>) sem bindings do React.
Use createStore + useStore(store, selector) para o padrão de provider do Next.js.

import { createStore, StoreApi } from "zustand/vanilla";
type MyStore = StoreApi<MyState>;

Como tipar o hook seletor do provider em TypeScript?

function useAppStore<T>(selector: (state: AppState) => T): T {
  const store = useContext(AppStoreContext);
  if (!store) throw new Error("Missing provider");
  return useStore(store, selector);
}

O genérico T infere o tipo de retorno da função seletora.

Links Relacionados

Receita

// stores/counter-store.ts
import { createStore } from "zustand/vanilla";
 
export interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
}
 
export const createCounterStore = (initialCount = 0) =>
  createStore<CounterState>((set) => ({
    count: initialCount,
    increment: () => set((s) => ({ count: s.count + 1 })),
    decrement: () => set((s) => ({ count: s.count - 1 })),
  }));
 
export type CounterStore = ReturnType<typeof createCounterStore>;

// providers/counter-provider.tsx
"use client";
 
import { createContext, useContext, useRef, ReactNode } from "react";
import { useStore } from "zustand";
import { createCounterStore, CounterState, CounterStore } from "@/stores/counter-store";
 
const CounterContext = createContext<CounterStore | null>(null);
 
export function CounterProvider({
  children,
  initialCount,
}: {
  children: ReactNode;
  initialCount?: number;
}) {
  const storeRef = useRef<CounterStore>();
  if (!storeRef.current) {
    storeRef.current = createCounterStore(initialCount);
  }
  return (
    <CounterContext.Provider value={storeRef.current}>
      {children}
    </CounterContext.Provider>
  );
}
 
export function useCounterStore<T>(selector: (state: CounterState) => T): T {
  const store = useContext(CounterContext);
  if (!store) throw new Error("useCounterStore must be used within CounterProvider");
  return useStore(store, selector);
}

Exemplo Funcional

// stores/app-store.ts
import { createStore } from "zustand/vanilla";
import { persist, createJSONStorage } from "zustand/middleware";
 
export interface AppState {
  user: { id: string; name: string; email: string } | null;
  theme: "light" | "dark";
  setUser: (user: AppState["user"]) => void;
  setTheme: (theme: AppState["theme"]) => void;
  logout: () => void;
}
 
export type AppStoreType = ReturnType<typeof createAppStore>;
 
export const createAppStore = (initState?: Partial<AppState>) =>
  createStore<AppState>()(
    persist(
      (set) => ({
        user: null,
        theme: "light",
        ...initState,
        setUser: (user) => set({ user }),
        setTheme: (theme) => set({ theme }),
        logout: () => set({ user: null }),
      }),
      {
        name: "app-storage",
        storage: createJSONStorage(() =>
          typeof window !== "undefined"
            ? localStorage
            : {
                getItem: () => null,
                setItem: () => {},
                removeItem: () => {},
              }
        ),
        partialize: (state) => ({ theme: state.theme }),
      }
    )
  );

// providers/app-provider.tsx
"use client";
 
import { createContext, useContext, useRef, ReactNode } from "react";
import { useStore } from "zustand";
import { createAppStore, AppState, AppStoreType } from "@/stores/app-store";
 
const AppStoreContext = createContext<AppStoreType | null>(null);
 
interface AppProviderProps {
  children: ReactNode;
  initialState?: Partial<AppState>;
}
 
export function AppProvider({ children, initialState }: AppProviderProps) {
  const storeRef = useRef<AppStoreType>();
  if (!storeRef.current) {
    storeRef.current = createAppStore(initialState);
  }
  return (
    <AppStoreContext.Provider value={storeRef.current}>
      {children}
    </AppStoreContext.Provider>
  );
}
 
export function useAppStore<T>(selector: (state: AppState) => T): T {
  const store = useContext(AppStoreContext);
  if (!store) throw new Error("useAppStore must be used within AppProvider");
  return useStore(store, selector);
}

// app/layout.tsx (Server Component)
import { AppProvider } from "@/providers/app-provider";
import { cookies } from "next/headers";
 
async function getServerUser() {
  const cookieStore = await cookies();
  const token = cookieStore.get("auth_token")?.value;
  if (!token) return null;
 
  const res = await fetch("https://api.example.com/me", {
    headers: { Authorization: `Bearer ${token}` },
  });
  if (!res.ok) return null;
  return res.json();
}
 
export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const user = await getServerUser();
 
  return (
    <html lang="en">
      <body>
        <AppProvider initialState={{ user }}>
          {children}
        </AppProvider>
      </body>
    </html>
  );
}

// app/dashboard/page.tsx (Server Component)
import { DashboardClient } from "./dashboard-client";
 
async function getDashboardData() {
  const res = await fetch("https://api.example.com/dashboard", {
    next: { revalidate: 60 },
  });
  return res.json();
}
 
export default async function DashboardPage() {
  const data = await getDashboardData();
  return <DashboardClient serverData={data} />;
}

// app/dashboard/dashboard-client.tsx
"use client";
 
import { useAppStore } from "@/providers/app-provider";
 
export function DashboardClient({ serverData }: { serverData: any }) {
  const user = useAppStore((s) => s.user);
  const theme = useAppStore((s) => s.theme);
 
  return (
    <div className={theme === "dark" ? "bg-gray-900 text-white" : "bg-white"}>
      <h1>Welcome, {user?.name ?? "Guest"}</h1>
      <pre>{JSON.stringify(serverData, null, 2)}</pre>
    </div>
  );
}

Análise Detalhada

Como Funciona

No Next.js App Router, os módulos são carregados uma vez no servidor e compartilhados entre todas as requisições. Um store create() em nível de módulo vazaria estado entre usuários.
createStore de zustand/vanilla cria uma instância de store sem hooks do React. Encapsulá-lo em Context + useRef garante uma instância por árvore React.
O Provider cria o store uma vez na montagem (via useRef) e nunca o recria, mesmo entre re-renderizações.
Server Components buscam dados e os passam como initialState para o Client Provider, que inicializa o store.
useStore(store, selector) do Zustand conecta um store vanilla ao React com assinaturas baseadas em seletores.
O adaptador de armazenamento do middleware persist deve lidar com o ambiente do servidor onde localStorage é indefinido.

Variações

Store singleton simples (use apenas se o vazamento de estado SSR for aceitável):

// Aceitável para estado verdadeiramente global, como feature flags que são
// iguais para todos os usuários
import { create } from "zustand";
 
export const useFeatureFlags = create<{ flags: Record<string, boolean> }>(() => ({
  flags: {},
}));

Persist seguro para hidratação com onRehydrateStorage:

createStore<State>()(
  persist(storeCreator, {
    name: "store",
    onRehydrateStorage: () => {
      return (state, error) => {
        if (error) console.error("Hydration failed:", error);
        else console.log("Hydrated:", state);
      };
    },
  })
);

Stores por rota:

// app/checkout/layout.tsx
import { CheckoutProvider } from "@/providers/checkout-provider";
 
export default function CheckoutLayout({ children }: { children: React.ReactNode }) {
  return <CheckoutProvider>{children}</CheckoutProvider>;
}
// O store só existe dentro do segmento de rota de checkout

Notas de TypeScript

Use createStore em vez de create para stores vanilla no Next.js. Os tipos são diferentes.
O padrão de provider requer a tipagem do contexto, do hook seletor e do criador de store separadamente.

import { createStore, StoreApi } from "zustand/vanilla";
import { useStore } from "zustand";
 
type MyStore = StoreApi<MyState>;
 
// Contexto tipado
const StoreContext = createContext<MyStore | null>(null);
 
// Hook seletor tipado
function useMyStore<T>(selector: (state: MyState) => T): T {
  const store = useContext(StoreContext);
  if (!store) throw new Error("Missing provider");
  return useStore(store, selector);
}

Armadilhas

Um store create() em nível de módulo no Next.js App Router compartilha estado entre todas as requisições renderizadas no servidor. O Usuário A poderia ver os dados do Usuário B. Sempre use o padrão Context + createStore para estado específico do usuário.
O middleware persist acessa localStorage na importação, o que gera um erro em ambientes de servidor. Proteja com typeof window !== "undefined" ou use um storage no-op no servidor.
Mismatches de hidratação ocorrem quando o HTML renderizado no servidor usa o estado padrão, mas o cliente hidrata com o estado persistido. Use um portão de hidratação ou suprima avisos de hidratação para diferenças conhecidas.
useRef para o store impede a recriação, mas também significa que as alterações em initialState após a primeira renderização são ignoradas. Se precisar reinicializar, use uma prop key no Provider.
Não importe hooks de Client Component (useAppStore) em Server Components. Server Components não podem usar hooks.
O callback onRehydrateStorage do middleware persist é executado após a renderização inicial. Componentes podem exibir brevemente o estado padrão.

Alternativas

Abordagem	Prós	Contras
Context + createStore	Seguro para SSR, isolamento por requisição	Mais boilerplate que singleton
create() em nível de módulo	Simples, sem necessidade de provider	Vaza estado em SSR
Redux Toolkit + next-redux-wrapper	Padrão SSR maduro	Configuração pesada e complexa
Jotai com Provider	Atômico, seguro para SSR com Provider	Paradigma diferente

FAQs

Por que não se pode usar um store `create()` em nível de módulo no Next.js App Router para estado específico do usuário?

Módulos são carregados uma vez no servidor e compartilhados entre todas as requisições.
Um store singleton vazaria o estado do Usuário A para a requisição do Usuário B.
Use o padrão Context + createStore para isolamento por requisição.

O que é o padrão Context + createStore para Next.js?

Use createStore de zustand/vanilla para criar instâncias de store (não hooks do React).
Encapsule-o em um provider de Contexto React que cria uma instância por montagem (via useRef).
Exponha um hook seletor tipado usando useStore(store, selector).

Como passar dados buscados no servidor para um store Zustand no Next.js?

Busque dados em um Server Component e passe-os como initialState para o Client Provider.
O Provider inicializa o store com esses dados na primeira renderização.

// Server Component
const user = await getServerUser();
return <AppProvider initialState={{ user }}>{children}</AppProvider>;

Por que `useRef` impede que o store seja recriado em re-renderizações?

useRef mantém o mesmo valor entre renderizações sem disparar re-renderizações.
O store é criado uma vez na montagem dentro da verificação if (!storeRef.current).
Isso também significa que as alterações em initialState após a primeira renderização são ignoradas.

Quando um store singleton simples é aceitável no Next.js?

Para estado verdadeiramente global que é o mesmo para todos os usuários (por exemplo, feature flags).
Quando o vazamento de estado SSR não é uma preocupação.
Use create() (não createStore) para este padrão mais simples.

Gotcha: O que acontece se o middleware persist acessar `localStorage` durante o SSR?

Gera um erro porque localStorage não está disponível no servidor.
Proteja com typeof window !== "undefined" ou forneça um storage no-op para o servidor.

Gotcha: Por que você pode ver um mismatch de hidratação com estado persistido?

O HTML renderizado no servidor usa o estado padrão, mas o cliente hidrata com o estado persistido (diferente).
Isso causa um mismatch. Use um portão de hidratação ou suprima avisos para diferenças conhecidas.

Como escopar um store Zustand para um segmento de rota específico?

// app/checkout/layout.tsx
export default function CheckoutLayout({ children }) {
  return <CheckoutProvider>{children}</CheckoutProvider>;
}

Coloque o provider em um layout de rota. O store só existe dentro desse segmento de rota.

Você pode importar um hook Zustand (como `useAppStore`) em um Server Component?

Não. Server Components não podem usar hooks.
Importe e use hooks Zustand apenas em Client Components marcados com "use client".

Qual a diferença entre `create` e `createStore` em TypeScript?

create retorna um hook React (UseBoundStore<StoreApi<State>>).
createStore retorna um store vanilla (StoreApi<State>) sem bindings do React.
Use createStore + useStore(store, selector) para o padrão de provider do Next.js.

import { createStore, StoreApi } from "zustand/vanilla";
type MyStore = StoreApi<MyState>;

Como tipar o hook seletor do provider em TypeScript?

function useAppStore<T>(selector: (state: AppState) => T): T {
  const store = useContext(AppStoreContext);
  if (!store) throw new Error("Missing provider");
  return useStore(store, selector);
}

O genérico T infere o tipo de retorno da função seletora.

Zustand com Next.js

Buscar na documentação

Zustand com Next.js