ReferenceError: localStorage is not defined in NextJs

Question

I have this function component But it's giving this error ReferenceError: localStorage is not defined

import React, { useRef } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { AiFillInstagram } from 'react-icons/ai';
import { BsFacebook } from 'react-icons/bs';
import { AiFillYoutube } from 'react-icons/ai';
import Block from './block.tsx';
import { AiFillTwitterCircle } from 'react-icons/ai';
import { CiCircleRemove } from 'react-icons/ci';

export default function profile({ name, profile, bio, insta, fb, twt, yt, blocks }) {
  const dialogRef = useRef(null);
  const handleAddBlock = () => {
    dialogRef.current.showModal();
  };

  return (
    <div>
      <div className="profilec">
        <div className="up">
          <button>copy</button>
          <div className="imgc">
            <Image width={100} height={100} className="img" src={profile} />
          </div>
          <h3>{name}</h3>
          <p>{bio}</p>
          <div className="media">
            <p className="i">
              <Link href={`https://youtube.com/@${yt}`}>
                <AiFillYoutube />
              </Link>
            </p>
            <p className="i">
              <Link href={`https://twitter.com/${twt}`}>
                <AiFillTwitterCircle />
              </Link>
            </p>
            <p className="i">
              <Link href={`https://facebook.com/${fb}`}>
                <BsFacebook />
              </Link>
            </p>
            <p className="i">
              <Link href={`https://instagram.com/${insta}`}>
                <AiFillInstagram />
              </Link>
            </p>
          </div>
        </div>
        <div id="blocks">
          {blocks.map((e) => {
            return <Block img={e.img} title={e.title} desc={e.desc} />;
          })}
          {JSON.parse(localStorage.getItem('user')) &&
            JSON.parse(localStorage.getItem('user')).name == name && (
              <button onClick={handleAddBlock}>Add Block</button>
            )}
        </div>
      </div>
      <dialog ref={dialogRef} id="d">
        <div>
          <button id="close">
            <CiCircleRemove />
          </button>
          <form>
            <h3>Add Block</h3>
            <input required placeholder="Enter Block Title" type="text" name="" />
            <input required placeholder="Enter Block Description" type="text" name="" />
            <input type="file" id="fileprofile" hidden />
            <button id="filebtn">Add Image</button>
            <input value="Submit" type="submit" />
          </form>
        </div>
      </dialog>
    </div>
  );
}

It's a simple component of a profile showing the name bio profileimage and social media links but it's not working

I have found this but it's not the same as my code:

Solve ReferenceError: localStorage is not defined in Next.js