`next/dynamic` lets you delay loading a Client Component until its [JavaScript](/courses/javascript) is actually needed. This is useful for large or optional UI such as: - code editors - charts - maps - modals - rich text editors - complex dashboards ### Normal Import ```tsx import CodeEditor from './CodeEditor'; ``` This makes the component part of the route's normal dependency graph. ### Dynamic Import ```tsx import dynamic from 'next/dynamic'; const CodeEditor = dynamic( () => import('./CodeEditor'), { loading: () =>

Loading editor...

} ); ``` Then: ```tsx export default function Playground() { return ; } ``` ### Load Only When the User Needs It The biggest benefit appears when the component is conditional: ```tsx 'use client'; import { useState } from 'react'; import dynamic from 'next/dynamic'; const CodeEditor = dynamic( () => import('./CodeEditor'), { loading: () =>

Loading editor...

} ); export default function Example() { const [open, setOpen] = useState(false); return ( <> {open && } ); } ``` Now the editor [JavaScript](/courses/javascript) is not required until the user chooses to open it. ### Dynamically Loading a Library You can also use JavaScript `import()` directly. For example, a fuzzy-search package may only be needed after the user begins searching: ```tsx async function search(query) { const Fuse = (await import('fuse.js')).default; const fuse = new Fuse(items, { keys: ['title'] }); return fuse.search(query); } ``` The library does not need to be part of the initial JavaScript used before search begins. ### Do Not Lazy Load Tiny Components Without a Reason This usually gives little benefit: ```text Tiny icon component → dynamically import ``` while adding additional loading complexity. Focus on expensive features whose code has a measurable effect on the bundle. ### Current App Router Detail Lazy loading primarily applies to **Client Components and client-side libraries**. [Server Components](/courses/nextjs) are already automatically code split by the framework. ### Interview-Ready Answer Use `next/dynamic` to lazy load large Client Components that are not required during the initial render. Combine it with conditional rendering so code for editors, charts, modals, or other expensive features is downloaded only when needed. Plain dynamic `import()` can similarly defer large client-side libraries.