Sling Academy
Home/Next.js/Fixing LocalStorage Not Defined Error in Next.js

Fixing LocalStorage Not Defined Error in Next.js

Last updated: January 01, 2024

Encountering an error such as ReferenceError: localStorage is not defined in your Next.js 13 project is a common issue that stems from the server-side rendering nature of Next.js. Since localStorage is a global object that’s available only in the browser’s window context, you’ll run into this error if your code attempts to access it during server-side rendering or static generation, when the window object doesn’t exist.

Here we’ll explore solutions that will ensure you’re using localStorage only on the client side.

Conditional Server-Side Checks

To avoid trying to access localStorage on the server-side, you can use a conditional check to determine if the code is being executed on the client. In Next.js 13, one of the most straightforward approaches is to check if the window object is defined before attempting to access localStorage.

One common place to perform this check is in useEffect hooks which run on the client side after a component mounts:

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    if (typeof window !== 'undefined') {
      // You can safely use localStorage here
      localStorage.setItem('myItem', 'value');
    }
  }, []);

  // The rest of your component...
}

Using Next.js Custom Hooks

To encapsulate the behavior and make it reusable across components, you can create a custom hook. This hook will abstract the functionality related to localStorage by checking the window object’s existence and storing data only on the client side.

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  // Initiate state with given value or retrieve from localStorage
  const [storedValue, setStoredValue] = useState(() => {
    if (typeof window === 'undefined') {
      return initialValue;
    }
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  // Update localStorage when state changes
  useEffect(() => {
    if (typeof window !== 'undefined') {
      window.localStorage.setItem(key, JSON.stringify(storedValue));
    }
  }, [storedValue]);

  return [storedValue, setStoredValue];
}

export default useLocalStorage;

By using this custom hook, localStorage is accessed correctly with client-side checks put neatly in place.

Dynamically Loading Components with No SSR

In some scenarios, you might want to take advantage of Next.js’s dynamic imports to load components only on the client side. This approach is useful when you have components that heavily rely on the browser environment. Here’s how you can do it:

import dynamic from 'next/dynamic';
import React from 'react';

// Import your component using dynamic import and disable SSR
const ClientSideComponent = dynamic(
  () => import('./ClientSideComponent'),
  { ssr: false }
);

function MyPage() {
  // Your ClientSideComponent will only render on the client-side
  return ;
}

By setting the { ssr: false } option, Next.js omits the component during the server-side render pass, thus deferring any client-side code, like usage of localStorage, till it actually runs in the browser.

Wrap Up

In summary, by understanding Next.js’s rendering process and using a conditional check, custom hooks or dynamic imports with no SSR, we can navigate through the challenges posed by server-side rendering and safely integrate localStorage within our projects.

Next Article: Fixing Next.js Error: No HTTP Methods Exported

Previous Article: Fixing Next.js Import CSS Error: A Simple Guide

Series: Common Errors in Next.js

Next.js

Related Articles

You May Also Like

  • Solving Next.js Image Component Error with CSS Classes
  • How to Use MUI (Material UI) in Next.js 14
  • Fixing Data Update Issues in Next.js Production
  • Fixing Next.js Undefined ENV Variables in Production Build
  • Solving Next.js SyntaxError: Unexpected token ‘export’
  • Next.js Error: Found Page Without a React Component as Default Export – How to Fix
  • Fixing Next.js Error: Blank Page on Production Build
  • Fixing Next.js Error when Importing SVGs: A Step-by-Step Guide
  • Next.js Issue: useEffect Hook Running Twice in Client
  • Fixing ‘self’ is not defined error in Next.js when importing client-side libraries
  • How to Dockerize a Next.js App for Production
  • How to set up Next.js with Docker Composer and Nginx
  • Solving Next.js CORS Issues: A Comprehensive Guide
  • Fixing Next.js Hydration Mismatch Error in Simple Ways
  • Next.js Error: Cannot use import statement outside a module
  • Next.js: How to Access Files in the Public Folder
  • Fixing Next.js Import CSS Error: A Simple Guide
  • Fixing Next.js Error: No HTTP Methods Exported
  • Fixing Next.js Error: Only Absolute URLs Are Supported