用途:在 Next.js 16 App Router 的客户端组件中使用 Zustand v5 实现全局状态、store、持久化与 hydration,避免 SSR 不匹配。
主要能力:覆盖 persist 中间件的 skipHydration 配合 useEffect 手动 rehydrate;用 useShallow 处理数组/对象选择器;按 SOLID 组织文件(store.ts、store-provider.tsx、use-store.ts);中间件组合顺序 devtools → persist → immer;v5 柯里化写法 create<State>()((set) => ({...}));Context 化 store 以避免 App Router 请求间共享;参考文档涵盖安装、store 模式、SSR/hydration、中间件、Next.js 集成、TypeScript、slices、自动选择器、重置状态、subscribe API、测试与 v4→v5 迁移。
使用方式:技能要求实现前并行启动 3 个 agent(explore-codebase、research-expert、mcp__context7__query-docs),实现后运行 fuse-ai-pilot:sniper 验证。store 按功能模块放置于 modules/[feature]/src/stores/,类型放 interfaces/。
适用场景:客户端 UI 状态(弹窗、侧边栏、主题、购物车)、跨客户端组件的全局状态、localStorage/sessionStorage 持久化、替代复杂 React Context。
限制:Zustand 仅用于客户端组件,禁止在 Server Components 使用(应直接取数);不得持久化 auth token(用 httpOnly cookies);不覆盖服务端状态缓存(见 nextjs-tanstack-query);避免 App Router 全局 store、对象选择器不加 useShallow、v4 语法。