How to use localStorage in Next.js and not get a hydration error?

drywall_dan

I want to use the local storage to save a token and access it, My code looks like this : if (typeof window !== 'undefined') { localStorage.setItem(key,value) } If I don't use the part that checks type of window i get the error : localStorage is not defined But that seems to lead to the error mentioned here in the docs which can be fixed by removing the typeof window check as that seems to cause the hydration error when I refresh the page which...

Originally asked by Mohamed Nabil on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

Try accessing localStorage within a useEffect() : useEffect(() => { localStorage.setItem(key, value); }, []);

Full answer by Irfanullah Jan: https://stackoverflow.stackexchange.com/a/73411103 (CC BY-SA 4.0).

Need it done for your business? UphillTech.