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

user_14115760 0
Viewed 60

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 is:

Hydration failed because the initial UI does not match what was rendered on the server.

Any idea on what to do here?

typescript next.js reactjs
1 Answers

Try accessing localStorage within a useEffect():

useEffect(() => {
  localStorage.setItem(key, value);
}, []);
user_9751640
Related