bundle-dynamic-imports
Use next/dynamic for lazy-loading heavy components. Apply when importing large components like editors, charts, or rich text editors that aren't needed on initial render.
Install
npx skillscat add theorcdev/8bitcn-ui/bundle-dynamic-imports Install via the SkillsCat registry.
About this skill
This skill demonstrates how to use Next.js's `next/dynamic` for lazy-loading large components like editors or charts. It solves the problem of bloated initial bundle sizes by deferring heavy component loading until needed. Use it when importing components that aren't required during initial render to improve performance.
SKILL.md
Dynamic Imports for Heavy Components
Use next/dynamic to lazy-load large components not needed on initial render.
Incorrect (Monaco bundles with main chunk ~300KB):
import { MonacoEditor } from './monaco-editor'
function CodePanel({ code }: { code: string }) {
return <MonacoEditor value={code} />
}Correct (Monaco loads on demand):
import dynamic from 'next/dynamic'
const MonacoEditor = dynamic(
() => import('./monaco-editor').then(m => m.MonacoEditor),
{ ssr: false }
)
function CodePanel({ code }: { code: string }) {
return <MonacoEditor value={code} />
}