ReferenceError: localStorage is not defined in Next.js: Causes and How to Fix

Accessing localStorage in Next.js

• In Next.js, accessing browser APIs like `localStorage` directly on the server-side will result in a `ReferenceError` because these APIs are not available outside of the browser environment. To fix this, ensure that any code accessing `localStorage` only runs in the browser.

Using useEffect or Component Lifecycle Methods

• Use `useEffect` or component lifecycle methods to ensure code accessing `localStorage` runs only on the client-side. With `useEffect`, you can encapsulate the code inside a callback that only runs after the component is mounted.

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Code inside this block runs only in the browser
    const storedValue = localStorage.getItem('key');
    console.log(storedValue);
  }, []);

  return <div>Check console</div>;
}

export default App;

Check Window Object for Safe Access

• Ensure that the `localStorage` is only accessed after verifying that the `window` object is defined. This approach is useful when dealing with any kind of synchronous code that needs to interact with `localStorage`.

if (typeof window !== 'undefined') {
  // Safe to use browser APIs
  const storedValue = localStorage.getItem('key');
}

Handling Server-side Rendering (SSR)

• During server-side rendering, make sure not to execute code that relies on `localStorage`. This can be achieved by conditionally executing code only in the client environment, as shown in previous examples.

Abstract the Storage Logic

• Abstract the storage logic into a custom hook or utility function to handle environments in a clean way. By doing this, you can manage all the storage interactions and environment checks in one place.

export const useLocalStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState(() => {
    if (typeof window === 'undefined') {
      return initialValue;
    }

    const item = localStorage.getItem(key);
    return item ? JSON.parse(item) : initialValue;
  });

  const setValue = value => {
    setStoredValue(value);
    if (typeof window !== 'undefined') {
      localStorage.setItem(key, JSON.stringify(value));
    }
  };

  return [storedValue, setValue];
};

By following these strategies, you can effectively manage localStorage interactions in a Next.js project without encountering the ReferenceError: localStorage is not defined.