Accessing LocalStorage in NextJS

I recently migrated a Content Management System from Create React App to NextJS in order to score some SEO points.
One of the challenges I faced was seeing these errors at compile time.

window is undefined or document is undefined

Window, and document are not available on the server. This is why you'll run into these types of errors if you are trying to access window properties or document.
In my case, I was persisting my authentication token to localStorage on the previous application.

To avoid running into these undefined errors at compile and build time, you can run a simple check.

if (typeof window !== "undefined") {

localStorage.setItem(key, value)

}

This basically tells your piece of code only to run when it's in the client environment where it can access window.

Keep hacking.

Comments

[Jaime López]

Nice trick, but I think it would make more sense to use useEffect method, did you try it?

useEffect(function() {
    console.log(window.localStorate);
},[]);

[Simple Neeraj]

useEffect(function() {
    console.log(window.localstorage);
},[]);

Because some time we need to copy and paste code, and after code doesn't work after pasting so developers 😯😯😯😯😯.

Your Code have some mistakes check out this 👍

[Justus Okwuchukwu Ali]

You may find yourself in a situation where you need access to localStorage outside a react component. In that case useEffect cannot help.

[Magnus Bondesson]

window.localStorage (spelling)

[Simple Neeraj]

Trying to making a reusable function

This function for get data from localstorage
key is required

const getFromStorage = (key) => {
if(typeof window !== 'undefined'){
     window.localstorage.getItem(key)
}
}

Set data to localstorage

const setToStorage = (key,value) => {
if(typeof window !== 'undefined'){
     return window.localstorage.setItem(key,value)
}
}

Any new method to use window in nextjs

[Vu]

That's nice

[Ciro Santilli]

This leads to a warning of type "Expected server HTML to contain a matching" on Next 10 BTW: stackoverflow.com/questions/464436...

[ARiyou Jahan]

remember, never create a function for window type checking.
it always must be an explicit type checking or it will not work

---

Right way to do it:

if (typeof window !== "undefined") {
    // client-side operation such as local storage.
    localStorage.setItem(key, value)
}

---

Wrong way:

const hasWindow = () => {
    return typeof window !== "undefined"
}

if (hasWindow()) {
    // client-side operation such as local storage.
    localStorage.setItem(key, value)
}

if (!hasWindow()) {
    // server-side code
}

read more and reason for this problem: Next.js GitHub issues page

[Othman]

what if i want to access local storage inside redux reducer ?

[Atom]

That's nice, but next time add a js tag to the code block to make it more readable.

Example:

if (typeof window !== "undefined") {

localStorage.setItem(key, value)

}

[Ibrahim Adeniyi]

Thank you

[77pintu]

Thanks for the great post !!!!!!

[Julien Prugne]

Thanks mate!
Works the same with sessionStorage