如何仅在浏览器环境中执行 function

Question

Please, I am new to SSR and Nextjs apps. I am using useLocalStorage Hook in order to save user data to local storage. Every thing is working fine but in my terminal ( node js ) I get message window is not defined. Is there a way to wrap this code in some kind of condition so that this functionality only executes in browser environment. I am not sure can I use;

if ( process.browser ) //then do this...

Can someone please help me how to solve this problem...

This is my local storage Hook which has to run only in browser, and not on node server:

import { useState } from 'react';

export const useLocalStorage = (key, initialValue) => {
    const [storedValue, setStoredValue] = useState(() => {
        try {
            const item = window.localStorage.getItem(key);
            return item ? JSON.parse(item) : initialValue;
        } catch (error) {
            console.log(error);
            return initialValue;
        }
    });

    const setValue = value => {
        try {
            let data = [];
            const voteId = {};
            if (window.localStorage.getItem(key) === null || window.localStorage.getItem(key) === undefined) {
                voteId.reviewId = value;
                data.push(voteId);
            } else {
                data = JSON.parse(window.localStorage.getItem(key));
                voteId.reviewId = value;
                data.push(voteId);
            }
            const valueToStore = data instanceof Function ? data(storedValue) : data;
            setStoredValue(valueToStore);
            window.localStorage.setItem(key, JSON.stringify(valueToStore));
        } catch (error) {
            console.log(error);
        }
    };

    return [storedValue, setValue];
};

Answer 1

I actually manage this like so:

If (.process;browser) return null;

I put this in front of everything so if this is met it is returning null, if not I will execute my function.

Answer 2

an appropriate solution would be to use nextjs dynamic library, when importing your useLocalStorage from it's file path to be used as a component. This tells nextjs to render only at the client end.

import dynamic from "next/dynamic";
const useLocalStorage = dynamic(
     () => import(<useLocalStorage filepath>)
       .then((mod) => mod.useLocalStorage), {ssr:false});