使用use-persisted-state：

import createPersistedState from 'use-persisted-state';

const useCartState = createPersistedState('cart');

export default function Category() {
     
  const [cart, setCart] = useCartState('');

  function addItem() {
    setCart("item");
  }

  return (
    <>
      <button onClick={addItem}>Add</button>)
    </>
  );
}

localStorage可以通过window对象获得。由于Next.js运行了两次代码，一次是在SSR期间在服务器中，一次是在客户端中，因此在SSR期间它将无法访问window对象，因此出现错误。
您需要检查window对象是否存在，然后像这样访问localStorage-

!!window ? window.localStorage.getItem("myCart") : ""

检查window对象是否存在于环境中，如果存在，则从localStorage获取值，否则返回空字符串。

这就是如何使用一种称为惰性初始化的技术来实现它。在组件之上创建函数。

const getInitialState =()=>localStorage.getItem("myCart");
export default function Category() {

const [cart, setCart] = useState(
        getInitialState || ""
    );

 useEffect(() => {
        localStorage.setItem("myCart", cart);
    }, [cart]);

function addItem() {
            setCart("item")   
    }

return (
<>
<button onClick={addItem}>Add</button>)
</>
);
}

const getInitialState =()=>typeof window !== 'undefined' 
    ? localStorage.getItem('myCart') 
    : undefined;
export default function Category() {

const [cart, setCart] = useState(
        getInitialState || ""
    );

      useEffect(() => {
    if (typeof window !== 'undefined') {
      localStorage.setItem("myCart", cart);
    }
  }, [cart]);

function addItem() {
            setCart("item")   
    }

return (
<>
<button onClick={addItem}>Add</button>)
</>
);
}