Manage State Like Hook on NextJs 13 with Zustand

React State Management

4 min readAug 28, 2023

Zustand is State Management to help manage state like get or change value that you can access through entire component without prop drilling.

We can try to build add to cart function, when Add To Cart clicked increase item on number on <CartButton/> component.

Step 1: Install Dependency

Zustand

npm install zustand

2. Heroicon React

npm install @heroicons/react

Step 2: Build UI

Modify /app/layout.tsx

import Navbar from "@/components/Navbar"
import './globals.css'
import { Montserrat } from 'next/font/google'

const font = Montserrat({ 
  weight: "500",
  preload: false
})

export const metadata = {
  title: 'LearnThink',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
      <html lang="en">
        <body className={`antialiased bg-slate-950 text-white ${font.className}`}>
          <Navbar/>…

Manage State Like Hook on NextJs 13 with Zustand

React State Management

Step 1: Install Dependency

Step 2: Build UI

Written by Nemesis Blog