Issue with SSR and usling local storage

src/components/CookieConsentBanner.tsx

@@ -3,16 +3,26 @@
 import { ThemeButton } from "./ThemeButton";
 import { Check, X } from "@phosphor-icons/react";
 import { useCookieContext } from "@/context/CookieContext";
+import { useEffect, useState } from "react";
 
 const CookieConsentBanner = () => {
   const { shouldShowBanner, setShouldAllowCookies, setShouldShowBanner } =
     useCookieContext();
 
+  const [isClientSide, setIsClientSide] = useState(false);
+
+  useEffect(() => {
+    // Ensure accessing localStorage only runs on the client side.
+    setIsClientSide(true);
+  }, []);
+
   const onClickButton = (shouldSaveCookies: boolean) => {
     setShouldAllowCookies(shouldSaveCookies);
     setShouldShowBanner(false);
   };
 
+  if (!isClientSide) return null;
+
   return (
     <div
       className={`${

src/context/CookieContext.tsx

@@ -31,14 +31,20 @@ export const useCookieContext = () => {
 };
 
 export const CookieProvider: FC<CookieProviderProps> = ({ children }) => {
-  const [shouldAllowCookies, setShouldAllowCookies] = useState(() => {
-    const storedPrefs = localStorage.getItem("cookiePrefs");
-    return storedPrefs ? JSON.parse(storedPrefs).shouldAllowCookies : false;
+  const [shouldAllowCookies, setShouldAllowCookies] = useState<boolean>(() => {
+    if (typeof window !== "undefined" && window.localStorage) {
+      const storedPrefs = localStorage.getItem("cookiePrefs");
+      return storedPrefs ? JSON.parse(storedPrefs).shouldAllowCookies : false;
+    }
+    return false;
   });
 
   const [shouldShowBanner, setShouldShowBanner] = useState<boolean>(() => {
-    const storedPrefs = localStorage.getItem("cookiePrefs");
-    return storedPrefs ? JSON.parse(storedPrefs).shouldShowBanner : true;
+    if (typeof window !== "undefined" && window.localStorage) {
+      const storedPrefs = localStorage.getItem("cookiePrefs");
+      return storedPrefs ? JSON.parse(storedPrefs).shouldShowBanner : true;
+    }
+    return true;
   });
 
   useEffect(() => {