[Solved]-In reactjs and nextjs constructor getting Reference Error: localstorage is not defined-Reactjs

i needed to read a token from localstorage in nextjs and add it to an axios instance header. it was outside of the component, so i used iife practice to ensure being in client:

(function(){
  if(typeof window !== "undefined"){
    axiosinstance.defaults.headers.common.authorization = `bearer ${localstorage.getitem('token_key')}`
  }
})()

i have created a function getlocalstorageitem and called this in useeffect with the required key name. after getting the value from localstorage, saved it in a state(i.e currentuser) and used it in initialstate.

 const [currentuser, setcurrentuser] = usestate({});

  const getlocalstorageitem = (key) => {
    return typeof window !== undefined
      ? window.localstorage.getitem(key)
      : null;
  };

  useeffect(() => {
    setcurrentuser({
      token: getlocalstorageitem("token"),
      refreshtoken: getlocalstorageitem("refreshtoken"),
    });
  }, []);

  const initialstate = {
    auth: {
      isloggedin: true,
      currentuser: currentuser,
    },
  };

window object and localstorage won't be available when nextjs is building. so you need to check if the code is running in the browser. if you are running in react hooks you don't need to do this because hooks are always running browser side in react.

just add these two utility functions to your nextjs project.

export const isbrowser = (): boolean => {
  return typeof window !== 'undefined'
}

export const nextlocalstorage = (): storage | void => {
  if (isbrowser()) {
    return window.localstorage
  }
}

then you can use it in your code like this

nextlocalstorage()?.setitem('user', json.stringify(user))

in addition to what @silent said, this works for me

 react.useeffect(() => {
    if (localstorage) {
      const getlocalstate = localstorage.getitem("headless");
      console.log("localstate: ", getlocalstate)
    }
  }, []);

i never touched nextjs but i guess its equivalent to nuxt.js. so it does server side rendering while you try to access localstorage on the client side.

you will need to use componentdidmount() for this. here an example

componentdidmount(){
   localstorage.setitem('mycat', 'tom');
   alert("tom is in the localstorage");
}

edit:

otherwise you could try with process.browser

if (process.browser) {
   localstorage.setitem("token", token);
}

as everyone already mentioned, nextjs runs both on client and server. on the server, there is no localstorage, hence the undefined error.

however, an alternative solution is to check if nextjs is running on the server before accessing the localstorage. ie

const isserver = typeof window === "undefined";

if(!isserver) {
 // access localstorage
 ...localstorage.get...
}