a hook to useLocalStorage in NextJS

useLocalStorage.ts

import { useState, useEffect } from "react";

const useLocalStorage = (key: string, initialValue: any) => {
  const isServer = typeof window === "undefined";

  const [value, setValue] = useState(() => {
    if (isServer) {
      return initialValue;
    }

    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  useEffect(() => {
    if (isServer) {
      return;
    }

    try {
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error(error);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [value, key]);

  return [value, setValue];
};

export default useLocalStorage;