Next.js Diagnostic

How to Fix "ReferenceError: window is not defined" in Next.js & Server-Side Rendering

Node.js server runtimes do not have DOM objects like window, document, or localStorage. Any code accessing them at module import time or in SSR render passes crashes.

ReferenceError: window is not defined

Quick Fix Checklist

  1. Add "use client"; at the very first line of interactive files in Next.js App Router
  2. Wrap browser API calls inside useEffect or inside user event handlers
  3. Use dynamic import with { ssr: false } for third-party client-only libraries (e.g. Canvas, Three.js, Leaflet)
  4. Guard checks using: if (typeof window !== "undefined") { ... }