defer-heavy-next-components

Moves heavyweight components out of a Next.js route's initial client bundle by converting their imports to next/dynamic, covering default and named export loaders, the ssr and loading options, the Client Component wrapper the App Router requires when server rendering is disabled, module-scope placement of the dynamic call, and verification with production build figures, with measured initial-load JavaScript where the build prints no route-level figure, and with the browser network panel. Use when a route's initial JavaScript is inflated by an editor, chart suite, map engine or other large library the first screen never shows, such as the contents of a modal or drawer, an inactive tab, a below-the-fold section, or a state reached only by scrolling, navigating or a flag. Not for components the first screen renders, trivial components, code splitting outside Next.js, or silencing an undiagnosed server-side crash.

Version

v1.0.0

Size

17 KB

Updated

2026-10-10

Your client verifies the signature before reading. This explicit manual read is available on every plan. Free automatically loads five chosen skills; paid plans automatically load relevant skills across the library.