Skip to content

Next.js errorNext.js: “ReferenceError: window is not defined”

The build or a page load fails with ReferenceError: window is not defined. Next.js renders pages on the server first, where there is no window, document or localStorage, so any code that touches them while rendering crashes there. It appears when a browser-only library or a bare window read runs during the server render. Here’s where the code should go, in Next.js’s words, or hand it over at a fixed price.

Short answer

Code that uses window, document or localStorage must run only in the browser. Put it inside useEffect in a Client Component, or load the component that needs it with next/dynamic and ssr: false from a Client Component. Adding "use client" alone isn’t enough: Client Components are still rendered on the server once.

Where browser code runs on the server

  1. 01

    Browser APIs read while rendering

    “This means browser APIs like window are available to use without hydration mismatches.” Next.js, Text content does not match server-rendered HTML

    Reading window.innerWidth or localStorage in the component body runs on the server too. Move it into useEffect, which runs only in the browser, and keep a default value for the first render.

  2. 02

    A library touches window when imported

    “ssr: false option will only work for Client Components, move it into Client Components ensure the client code-splitting working properly.” Next.js, Lazy loading

    Charts, maps, editors and some analytics packages read window as soon as they load. Load that component only in the browser with next/dynamic, from a Client Component.

    'use client'
    
    import dynamic from 'next/dynamic'
    
    const MapView = dynamic(() => import('../components/map'), { ssr: false })
  3. 03

    "use client" doesn’t mean browser-only

    “Browser-only APIs. E.g. localStorage, window, navigator.geolocation, etc.” Next.js, Server and Client Components

    Client Components can use browser APIs, but they still render once on the server for the first HTML. Guard the browser parts as above.

  4. 04

    Don’t branch on whether window exists

    “Using browser-only APIs like window or localStorage in your rendering logic” Next.js, Text content does not match server-rendered HTML

    Checking for window inside the render makes the server and browser render different HTML, which trades this error for a hydration error. Use useEffect or next/dynamic instead.

Checked against the vendor’s docs on : Next.js docs: Server and Client Components; Next.js docs: Lazy loading; Next.js docs: Hydration error.

Rather hand it over?

Fixed scope, fixed price, paid upfront. The work happens in writing; no call needed.

Related: Next.js hydration error · Next.js Module not found: Can’t resolve fs · Vercel npm run build exited with 1 · Next.js DynamicServerError

Questions

More on this error

Can I use ssr: false in a Server Component?

No. Next.js says ssr: false is not allowed with next/dynamic in Server Components. Create a small Client Component that does the dynamic import, and use that.

The error names document or localStorage instead. Same fix?

Yes. Any browser-only global fails the same way on the server, and the same moves apply.

Can you fix it for me?

If one bug is the whole problem, the App Fix Ticket covers it: a written diagnosis first, then the fix. If the app has more going on, the Launch Check is a written check of the whole app. Each issue found is rated critical, high, medium or low, with where it is and how it was confirmed. No issues worth fixing, no charge. If the Launch Check finds nothing rated medium or higher, Simon refunds the full $450. You keep the report either way.

A different error?

Describe it and get a written quote

Send the error and what you were doing. You get a written scope, a fixed price and a timeline; we reply by email, usually within one business day.