Next.js App Router – “window is not defined” error when using localStorage

[trbgaming100]

Hey everyone 👋
I’m using the Next.js App Router, and I get this error when trying to access localStorage:

ReferenceError: window is not defined

Here's the snippet i used:

const user = localStorage.getItem("user");

It works fine in the browser but crashes during build or SSR. How can I safely use localStorage in Next.js App Router components?

Guidelines

• I have read and understood this category's guidelines before making this post.

[shandilyaaryan]

This happens because Next.js renders components on the server first, and window or localStorage only exist in the browser environment.

✅ Fix:
Wrap your code so it only runs client-side, either with a useEffect hook or by marking the component as a client component.

Example 1 — Using "use client"

"use client";

import { useEffect, useState } from "react";

export default function Page() {
  const [user, setUser] = useState<string | null>(null);

  useEffect(() => {
    const stored = localStorage.getItem("user");
    setUser(stored);
  }, []);

  return <div>Hello {user ?? "Guest"}!</div>;
}

Example 2 — Using conditional check

if (typeof window !== "undefined") {
  const user = localStorage.getItem("user");
}

Extra Tip:
If you only need that data once, you can also hydrate it via a useEffect or pass it as prop from a client-only provider.