Zustand + Next.js 15: Usage Outside Functional Component with useRef

[D0nte53]

Hi, can I use a Zustand store Hi, how can I use a Zustand store outside of a React component in Next.js 15? I can't find any examples in the documentation.

export type ExampleStoreProps = {
  enableDevtools?: boolean;
  initState: ExampleStoreState;
};

export type ExampleStoreApi = t_StoreApi<ExampleStore, boolean>;

export const createExampleStore = ({
  enableDevtools = false,
  initState: _initState,
}: ExampleStoreProps) => {
  const initState = _initState;

  const stateCreator = (set: any, get, store): ExampleStore => ({
    ...(initState as any),
    setExampleProp: (path: string[], value: any) => {
      return set((state: ExampleStoreState) =>
        produce(state, (draft) => {
          _.set(draft.example._config, path, {
            ...(_.get(draft.example._config, path) || {}),
            ...value,
          });
        })
      );
    },

    getExampleProp: (path: string[]) => {
      const state = get();
      return _.get(state.example._config, path);
    },
  });

  let res = null as any;

  if (enableDevtools) {
    res = createStore(devtools(stateCreator, { name: "ExampleStore", enabled: enableDevtools }));
  } else {
    res = createStore(stateCreator);
  }

  return res as ExampleStoreApi;
};

export const ExampleContext = createContext<ExampleContextProps | null>(null);

export type ExampleProviderProps = Pick<ExampleStoreProps, "initState">;

export const ExampleProvider = ({
  children,
  initState,
}: PropsWithChildren & ExampleProviderProps) => {
  const enableDevtools = false as const;
  const exampleStoreRef = useRef<ExampleStoreApi | null>(null);
  if (!exampleStoreRef.current) {
    exampleStoreRef.current = createExampleStore({ enableDevtools, initState });
  }

  return (
    <ExampleContext.Provider value={exampleStoreRef.current}>
      {children}
    </ExampleContext.Provider>
  );
};

export const useExampleContext = <T,>(
  selector: (state: ExampleStore) => T
): T => {
  const store = useContext(ExampleContext) as ExampleStoreApi | null;
  if (!store) {
    console.error("ExampleContext is missing. Ensure you are within an ExampleProvider.");
    throw new Error("useExampleContext must be used within an ExampleProvider");
  }

  return useStore(store, selector);
};

Thanks for the help, everyone !

[dbritto-dev]

@D0nte53 we talk about that in our nextjs guide, lmk if something is missing

[ZeeshanZulfiqarAli]

Hey @dbritto-dev, I went through the Nextjs guide but couldn't find how I can use the Zustand store outside of a react component since the store reference is stored in a ref and accessible only through react context. Any ideas?

[dbritto-dev-seatpick]

Hey @dbritto-dev, I went through the Nextjs guide but couldn't find how I can use the Zustand store outside of a react component since the store reference is stored in a ref and accessible only through react context. Any ideas?

There's no way to do that on nextjs