# Heavy dependencies in Next.js

> How to fix heavy dependencies in Next.js — with the exact fix and copy-paste code.

_Category: Performance · Detector `heavy-library` · Severity: warning_

Some libraries are heavy enough that pulling one in for a small feature dominates your bundle and brings its own performance footguns — 3D engines that leak GPU memory, animation libraries that read layout every frame, date libraries many times larger than the native alternative. AI agents reach for whatever library they’ve seen most, so a marketing page ends up shipping a full charting or animation runtime for one small effect.

## The fix for Next.js

Dynamic-import client-only heavy libraries with `ssr:false` so they never touch the server bundle or block first paint, and load them behind interaction where possible.

```tsx
import dynamic from 'next/dynamic'
const Globe = dynamic(() => import('./Globe'), { ssr: false }) // Three.js stays out of initial JS
```

### Steps

1. Identify the heavy library and how much of it you actually use
2. Replace with a native/lighter option, or import a tree-shakeable subset
3. If it must stay, lazy-load it and dispose its resources on teardown

## How VibeCheck detects it

The `heavy-library` detector flags this live in the browser and reports it to the widget's Problems list — and to your coding agent over MCP.

- **Issue string:** `Framer Motion detected (58KB)`
- **Threshold:** Matches one of 16 known heavy-library signatures (globals, DOM patterns, or script URLs)

## FAQ

### Which libraries does VibeCheck flag?

It fingerprints 16 known-heavy libraries — 3D engines, animation runtimes, charting, CSS-in-JS, date and utility libraries — by their globals, DOM markers, or script URLs, and reports the weight plus that library’s common pitfalls.

### Do I have to remove the library?

Not necessarily. Often lazy-loading it (so only users who need the feature download it) or importing a lighter subset is enough. Removal only makes sense when a native API or a much smaller package fully covers your use.

### What’s the single most common heavy dependency?

Date libraries and animation runtimes. Moment.js is a classic — the native `Intl.DateTimeFormat` replaces most of it for zero bytes — and animation libraries are frequently shipped in full when a tree-shaken or lazy subset would do.

See the general, framework-agnostic fix: https://vibecheck.wcgw.fun/fix/heavy-dependencies.md

---

Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/heavy-dependencies. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt