How to persist your Zustand store in Next.js 13 (and 14) with app router

Published: 29 October 2023
on channel: QuickXplain

4,399

Here is how to store your Zustand state in browser's local storage.

Github repo from the video:
https://github.com/bzhn/qxp-nextjs-zu...

Official Zustand article about persisting your store:
https://docs.pmnd.rs/zustand/integrat...

00:00 - Introduction
00:16 - What result you will get from this video
01:06 - Creating Next.js 14 (with app/ router) project with Typescript. Setting everything up
01:25 - Web application code structure
02:21 - Get products data from fakestore API (fakestoreapi.com)
02:39 - Creating simple online-shop
03:40 - Implementing zustand state without persistance (for now)
06:14 - How to persist zustand storage in Next.js with app router
07:24 (07:54) - How to fix hydration error after persisting zustand store
09:11 - Some new methods for incrementing, decrementing and removing product from localStorage product cart
09:50 - Outro

Watch video How to persist your Zustand store in Next.js 13 (and 14) with app router online without registration, duration hours minute second in high quality. This video was added by user QuickXplain 29 October 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 4,399 once and liked it 57 people.

166