## TL;DR
Do not touch document during render or module init; move it into useEffect or a dynamically imported component with ssr: false. The error clears when no server pass executes the DOM call.

## The exact error
```text
ReferenceError: document is not defined
```

## Steps to fix
1. Search the stack trace for the first line of your code that touches document
2. Move that access into a useEffect (runs only in the browser)
3. If a whole library needs the DOM, import it with next/dynamic and { ssr: false }
4. Rebuild and reload; the server error should be gone

## When this applies
- Next.js with SSR or static prerendering
- Third-party libraries that assume a browser at import time

## When this does NOT apply
- Pure client-only React apps
- Code that already runs inside useEffect

## Tool + versions
Next.js 12+, React 17/18

## Why it happens
The server has no DOM, so document does not exist during SSR or prerendering. Any render-path or module-level access to it throws.

## Edge cases
- window and navigator fail the same way
- typeof document !== 'undefined' guards work but useEffect is cleaner

## Where this came from
Resolved from a real public thread: https://nextjs.org/docs/architecture/nextjs-compiler (docs:ssr-dom-guard).