Zustand con Next.js

// 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 debe usarse dentro de CounterProvider");
  return useStore(store, selector);
}

// 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 debe usarse dentro de 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>¡Hola, {user?.name ?? "Invitado"}</h1>
      <pre>{JSON.stringify(serverData, null, 2)}</pre>
    </div>
  );
}

// Aceptable para state verdaderamente global como feature flags que son
// iguales para todos los usuarios
import { create } from "zustand";
 
export const useFeatureFlags = create<{ flags: Record<string, boolean> }>(() => ({
  flags: {},
}));

createStore<State>()(
  persist(storeCreator, {
    name: "store",
    onRehydrateStorage: () => {
      return (state, error) => {
        if (error) console.error("Falló la hidratación:", error);
        else console.log("Hidratado:", state);
      };
    },
  })
);

// app/checkout/layout.tsx
import { CheckoutProvider } from "@/providers/checkout-provider";
 
export default function CheckoutLayout({ children }: { children: React.ReactNode }) {
  return <CheckoutProvider>{children}</CheckoutProvider>;
}
// El store solo existe dentro del segmento de ruta checkout

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