React? ?? ??? ??? ???? ???? ?? ?????! ?????? ?? ?? ?? ???? ??? ??? ?? ?? ????? Zustand? ?????. Redux? ??? ?? Context API? ?? ??? ????? Zustand? ??? ??? ????.

?? ?????? Zustand? ???? ?? ??? ??? ????? GitHub?? ???????. ? ??? ??? Next.js ?????? Zustand? ??? ? ????! ?

????? ?????? ?

Zustand(???? "??")? React? ?? ???? ?? ?? ????????. ??? ?????:

• ?? ??? API???.
• ???? ????? ?? ???.
• ???? ?? ??.
• ?? ???? ??(?: ?? ???)

?? Next.js ?????? ?? ???? ??? ???????!

---

Next.js ?????? Zustand? ???? ??

??? ??? ??? ?? Zustand? Next.js ?? ?????.

1. Zusstand ??

Zustand? ????? ?? ??? ?????.

npm i zustand

2. ??? ?? ??

src ?? ?? store?? ? ??? ????. ???? ?? Zustand ?? ??? ?????.

src/
  store/
    index.ts
    userStore.ts

---

3. ?? ??

userStore.ts

? ?????? ??? ?? ???? ?????.

import { create } from "zustand";

interface User {
  id: string;
  name: string;
  email: string;
}

interface UserStore {
  user: User | null;
  setUser: (user: User | null) => void;
}

export const useUserStore = create<UserStore>((set) => ({
  user: null,
  setUser: (user: User | null) => set({ user }),
}));

counterStore.ts(??? ??)

? ???? ??? ??? ???? ?? localStorage? ?????.

"use client";

import { create } from "zustand";
import { persist, createJSONStorage } from "zustand/middleware";

interface ICounterStore {
  counter: number;
  increment : ()=> void;
  decrement : ()=> void;
  reset : ()=> void;
  getLatestCountDivided2: ()=> number;
}
export const useCounterStore = create<ICounterStore>()(
  persist(
    (set, get) => ({
      counter: 0,

      increment: () => set(state => ({ counter: state.counter + 1 })),
      decrement: () => set(state => ({ counter: state.counter - 1 })),
      reset: () => set({ counter: 0 }),
      getLatestCountDivided2: ()=> get().counter / 2,
    }),
    {
      name: "counter-store",
      storage: createJSONStorage(()=> localStorage),
    }
  )
);

index.ts

? ??? ? ?? ??? ? ??? ?? ??? ?????.

import { useUserStore } from "./userStore";
import { useCounterStore } from "./counterStore";

export { useUserStore, useCounterStore };

---

4. ?????? Zustand ????

??? Next.js ?? ???? Zustand ???? ???? ??? ?? ????.

?.tsx

"use client";
import { useCounterStore, useUserStore } from "@/store";
import Link from "next/link";

export default function Home() {
  // Access Zustand stores
  const userStore = useUserStore();
  const counterStore = useCounterStore();

  const handleAddUser = () => {
    userStore.setUser({ id: "1", name: "Joodi", email: "mail@example.com" });
  };

  return (
    <div className="">
      <div className="flex gap-2 p-2">
        <Link className="p-2 border" href="/">Home</Link>
        <Link className="p-2 border" href="/about">About</Link>
        <Link className="p-2 border" href="/contact">Contact</Link>
      </div>
      <h1>Hello</h1>
      <h1>User: {userStore.user?.email}</h1>
      <button
        className="bg-blue-500 rounded-md p-2 text-white"
        onClick={handleAddUser}
      >
        Add User
      </button>

      <br />
      <h1>Counter: {counterStore.counter}</h1>
      <button className="bg-blue-500 rounded-md text-white p-2" onClick={counterStore.increment}>
        Increment
      </button>
      <button className="bg-blue-500 rounded-md text-white p-2" onClick={counterStore.decrement}>
        Decrement
      </button>
      <button className="bg-blue-500 rounded-md text-white p-2" onClick={counterStore.reset}>
        Reset
      </button>
    </div>
  );
}

---

??? ???? ????

? ?? ????? ?? ??? GitHub?? ??? ? ????. ????? ???? Next.js? ?? Zustand? ???? ???? ? ??? ?? ?? ???? ????.

??? ?? ? ??:

git clone https://github.com/MiladJoodi/Zustand_Starter_Project.git
cd Zustand_Starter_Project
npm install
npm run dev

---

Zustand? ??? ?? ??? ??? ???. ???? ??? ?????? ???? ?? ??? ??? ???! ?

? ??? ?? ??? ???? ?? ?? Zustand? ?????!? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!