Member-only story

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/>

          <main className="mx-auto max-w-6xl">
            {children}
          </main>
        </body>
      </html>
  )
}

Create <Navbar/> component: /components/Navbar.tsx

import Link from "next/link";
import LinkMenu from "./link/Menu";
import CartButton from "./CartButton";

export default function Navbar() {
  return <nav>
    <div className="mx-auto max-w-6xl flex justify-between items-center text-sm text-slate-100 py-4">
      <Link href="/">
        <div className="uppercase font-bold">Learn<span className="text-teal-500">Thing</span></div>
      </Link>

      <div className="flex gap-2">
        <LinkMenu href="/product" label="Product" isNew/>
      </div>

      <div className="flex gap-1 items-center">
        <CartButton/>
      </div>
    </div>
  </nav>
}

Create <LinkMenu/> component: /components/link/Menu.tsx

import Link from "next/link";

type Props = {
  href: string…

Manage State Like Hook on NextJs 13 with Zustand

React State Management

Step 1: Install Dependency

Step 2: Build UI

Written by Nemesis Blog

Responses (2)