Next.js Discord

Discord Forum

Zustand persist + immer middleware hydration issues

Answered
Soft-Coated Wheaten Terrier posted this in #help-forum
Open in Discord
Soft-Coated Wheaten TerrierOP
Hey everyone! I’m implementing a Zustand store using both persist and immer middlewares in a Next.js project, following the official guide https://zustand.docs.pmnd.rs/reference/integrations/persisting-store-data#usage-in-next.js.

Despite using "use client" on all components consuming the store, I’m consistently getting a hydration error. It seems like the persisted state from storage is clashing with the initial server render.

I’ve unfortunately lost my component-level code, but does anyone has any idea?
Thanks
Answered by Soft-Coated Wheaten Terrier
I fixed it already
I accidentally tried to acsess functions of the store with use store and it doesn’t work but doing it normally with useEncounterStore does
View full answer

5 Replies

Soft-Coated Wheaten TerrierOP
i found my code
store.ts
https://pastebin.com/m1KYt3pU
useStore.tsx
https://pastebin.com/i7WCrghq
CombatTracker.tsx
https://pastebin.com/rfhHSGST
any ideas?
Blue orchard bee
Have you tried lazily loading the component you want to make client only?
Even if you do "use client" your components will be pre rendered for hydration
This is a very specific Next.js thing
Soft-Coated Wheaten TerrierOP
I fixed it already
I accidentally tried to acsess functions of the store with use store and it doesn’t work but doing it normally with useEncounterStore does
Answer