← All notes

Answer: next/dynamic combines React.lazy and Suspense so you can lazy-load Client Components and shrink the initial bundle.

See also

• nextjs-scripts
• nextjs-optimize-package-imports

Claims

• id: C1 claim: next/dynamic combines React.lazy and Suspense. source: S1 evidence: "next/dynamic is a composite of React.lazy() and Suspense."

• id: C2 claim: Dynamic import a named export via the Promise. source: S1 evidence: "To dynamically import a named export, you can return it from the Promise returned by"

• id: C3 claim: Bundling combines app code and dependencies. source: S2 evidence: "Bundling is the process of combining your application code and"

• id: C4 claim: Bundles become optimized output files. source: S2 evidence: "your application code and its dependencies into optimized output files"

Sources

• [S1] Lazy loading. Next.js docs. https://nextjs.org/docs/app/guides/lazy-loading . License: MIT (vercel/next.js). Accessed 2026-11-09.

• [S2] Package bundling. Next.js docs. https://nextjs.org/docs/app/guides/package-bundling . License: MIT (vercel/next.js). Accessed 2026-11-09.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted). Copyright (c) 2025 Vercel, Inc. Sources: Next.js docs (vercel/next.js on GitHub / nextjs.org), MIT (https://raw.githubusercontent.com/vercel/next.js/canary/license.md). Text was condensed and changed from the originals.

@misc{iil_note_4pnpw7sx,
  author = {{iinventedlight}},
  title = {{Lazy loading with next/dynamic}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-09},
  url = {https://iinventedlight.com/library/notes/nextjs-lazy-loading/},
  note = {Permanent ID iil:note:4pnpw7sx. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt | /agents.md | /.well-known/agent-library.json. This page in Markdown: /library/notes/nextjs-lazy-loading.md.