How to use Localstorage in Next.js 12 & 13 Above? 3 Method

If you’re developing websites with Next.js, chances are you’ll find LocalStorage handy for storing user data and various other types of information.

In the Next.js 13 and the later versions, adding “use client” at the beginning of your code turns your server component into a client component, allowing access to LocalStorage when running on the client.

Using LocalStorage in the latest version of Next.js might be a little challenging for some users, as you might encounter the “Error: localStorage is not defined” issue.

You are facing this error because of the way you write your code.

In the Next.js version 13 or the latest version vercel has introduced an app folder in which all the components are now server components by default.

Because all the components are now server components because of this Next.js can not access localStorage in the server.

Solution for Next.js 13 and later version

To fix this error you need to convert your server component into a client component so that when your code runs on a client it can access the localstorage.

The good thing is making client components becomes easy in the Next.js 13 and the later versions.

All you need is to include "use client" at the beginning of your code to convert your server component into a client component. This enables access to LocalStorage when the component operates on the client side.

"use client" //This turns your server component into a client.

export default function Page() {
  localStorage.setItem("name", "crystal");

  return (
    <main>
//rest of your code
    </main>
  );
}

Solution for Next.js 12 and below version

If you using an older version of next.js then “use client” will not work for you, but there are a few methods that will force the code to only run on the client side and because of this access to localstorage will become easy.

1. Check for the Window object

In the first method, we check if the window object is available or not.

The code will only execute if the Window object is available in the browser.

And if the check for the window object using the if else statement and typeof operator.

export default function Page() {
if (typeof window !== "undefined") {
value = localStorage.getItem("favoriteNumber") || ""
}

  return (
    <main>
//rest of your code
    </main>
  );
}

This is one of the easiest way to use localstorage in the Next.js 12 or below versions without getting any error.

2. Using the “useEffect” hook

If the first way doesn’t work, try this one where we use the useEffect hook to access localStorage.

If you know about the useEffect hook, you might also know that it runs only in the browser, not on the server side.

import { useEffect } from 'react';

export default function Page() {
  
  useEffect(() => {
  localStorage.setItem("name", "crystal"); // Access localStorage here
}, []);
  
  return (
    <main>
//rest of your code
    </main>
  );
}

Because useEffect runs in the browser, accessing localStorage using this method will not throw any kind of error.

I have also shared a simple method to Add a Sitemap in Next.js 13 or a later version (Static & Dynamic Websites).