# How do I fix "document is not defined" with Lottie in Next.js?

> lottie-web reads browser globals such as document when it is imported, so it crashes during server-side rendering in Next.js. Load it only in the browser: put the animation in a client component and import it with next/dynamic and ssr: false, or import lottie-web inside useEffect.

Updated November 2026. Source: https://www.exodeui.com/questions/lottie-react-nextjs-document-is-not-defined/

## Key takeaways

- The error appears because Next.js renders on the server, where there is no document
- lottie-react uses lottie-web, so it has the same issue
- Fix 1: next/dynamic with ssr: false inside a client component
- Fix 2: import lottie-web inside useEffect
- Reserve the animation's space so the page does not shift when it loads

## Frequently asked questions

### Does this happen with the Pages Router too?

Yes. The same dynamic import with ssr: false fixes it.

### Is @lottiefiles/dotlottie-react SSR safe?

Test it in your setup. If you see the same error, use the same client-only dynamic import.

### Will dynamic import hurt SEO?

No. Search engines do not need the animation. Keep important text in normal HTML.

### Why do I get "window is not defined" instead?

Same cause, different global. The fix is identical.

## Related

- [Interactive animations with Next.js SSR](https://www.exodeui.com/learn/interactive-animations-nextjs-ssr)
- [How to use Lottie in React](https://www.exodeui.com/questions/how-to-use-lottie-in-react)
- [Why is lottie-web so big?](https://www.exodeui.com/questions/why-is-lottie-web-bundle-so-big)
- [Animation and Core Web Vitals](https://www.exodeui.com/learn/animation-core-web-vitals)