Add "Persisting store data" documentation in "Setup with Next.js" page.

[shareef99]

Thanks for the great library. I am starting a new project. After reading about zustand, I decided to try it out. I am reading the setup with nextjs documentation and it is working in my application. Now I wanted the state to persist with local storage. I started reading Persisting store data, but it uses create from zustand and in nextjs doc it uses createStore from zustand/vanilla. It confuses me. Sorry for the dumb question. But can you add a section in setup with nextjs for presisting. Thanks a lot

[dbritto-dev]

@shareef99 sure, that's an awesome suggestion. Let me take care of it.

[shareef99]

Hey, I discarded the NextJS doc example and follow along with Persisting store data doc. I achieved what I wanted but their is a small issue. All my methods/functions can be undefined, which doesn't make sense to me. Can you please look what I am doing wrong?

// store/auth.tsx
import { createJSONStorage, persist } from "zustand/middleware";
import { create } from "zustand";
import { localStorageKeys } from "@/constants/local-storage";

export type AuthUser = {
  name: string;
  email: string;
 };

type AuthState = { auth: AuthUser | null };
type AuthAction = {
  login: (_auth: AuthUser) => void;
  logout: () => void;
};

export type AuthStore = AuthState & AuthAction;

export const useAuthStore = create<AuthStore>()(
  persist(
    (set) => ({
      auth: null,
      login: (auth) => set({ auth: auth }),
      logout: () => set({ auth: null }),
    }),
    {
      name: localStorageKeys.authUser,
      storage: createJSONStorage(() => localStorage),
    }
  )
);

// store/index.ts
import { useState, useEffect } from "react";

const useStore = <T, F>(
  store: (_callback: (_state: T) => unknown) => unknown,
  callback: (_state: T) => F
) => {
  const result = store(callback) as F;
  const [data, setData] = useState<F>();

  useEffect(() => {
    setData(result);
  }, [result]);

  return data;
};

export default useStore;

// app/auth/page.tsx
import { AuthUser, useAuthStore } from "@/store/auth";
import useStore from "@/store";

export default function Page() {
  const router = useRouter();
  const authStore = useStore(useAuthStore, (state) => state);
 
  const submitHandler = () => {
    // Login Logic
    
    // When I try to do `authStore.login(user)`
    // TS says `login` can be `undefined`
  }

  return (
    ...
  )
}

[dbritto-dev]

@shareef99 the ts behavior seems correct to me, since initial state is undefined until you set the state with your store

[dbritto-dev]

btw, here's an example -> https://stackblitz.com/edit/nextjs-and-zustand-persist