Next.js Provider Zustand
npm install next-zustandThis Provider create for SSR initial state in Zustand https://www.npmjs.com/package/zustand
Init Store:
'use client' //for next js app directory v13^
import { createProvider } from 'next-zustand';
import {shallow} from "zustand/shallow";
export type Store = {
count: number;
setPrevCount: () => void;
setNextCount: () => void;
};
const creators = createProvider<Store>()(
(set) => ({
count: 0,
setPrevCount: () => {
set((state) => ({ count: state.count - 1 }))
},
setNextCount: () => {
set((state) => ({ count: state.count + 1 }))
}
}),
shallow // You can use shallow function for optimize re-renders if this need
);
export const useStore = creators.getUseStore()
export const Provider = creators.Provider
Then init Provider in your app. You can use initialState in
<Provider initialState={{
count: await getInitialCount()
}}>
{children}
</Provider>or
<Provider initialState={(prevStore) => ({
post: {
...prevStore.post,
title: postTitleFromServer
}
})}>
{children}
</Provider>to init server constants
In Components :
'use client'
import { useStore } from '@/store'
function App() {
const count = useStore(store => store.count) // You can use one selector
const {setPrevCount, setNextCount} = useStore(store => ({
setNextCount: store.setNextCount,
setPrevCount: store.setPrevCount,
}))
return (
<div className="App">
<h1>App</h1>
<p>{`Count: ${count}`}</p>
<button type="button" onClick={setPrevCount}>
Prev
</button>
<button type="button" onClick={setNextCount}>
Next
</button>
</div>
);
}Happy coding!
MIT © Igor Lialko