ReferenceError: window is not defined

What it means in plain English

window exists only in the browser. Next.js renders pages on the server first, including Client Components, so a line that touches window during that render throws ReferenceError: window is not defined. The page can work in a tutorial that never server-renders, then die on Vercel.

Likely causes

• Code calls window, document, or localStorage in the body of a component, or in useState(window.innerWidth).
• Adding "use client" was treated as "this file never runs on the server." Next.js still prerenders Client Components to HTML, then hydrates them in the browser.
• A library that expects a browser is imported from a Server Component.

How to fix it, step by step

1. Next.js says to use a Client Component for browser-only APIs such as window. Put "use client" at the top of that file, above the imports.
2. Don't read window while rendering. Read it inside useEffect, or in an event handler such as onClick, which runs in the browser.
3. Give useState a plain starting value (0, null, false). Set the real window value in the effect.
4. If a third-party component needs the browser and has no "use client" of its own, wrap it in your own Client Component and import that wrapper. Next.js also documents the client-only package for modules that must not load on the server.
5. Ask the AI: "Don't touch window during render. Read it in useEffect."

How to check it worked

• Reload the production page. The reference error is gone and the browser-only bit appears after load.
• View source or the first paint can still be empty for that bit. That is expected if you wait for useEffect.

Sources

• https://nextjs.org/docs/app/getting-started/server-and-client-components (opens in a new tab)