Using Dynamic Imports

Next.js offers out of the box code splitting support due to its page-based architecture. So, your pages loads & render faster in the client-side.

But if you use a lot of heavy modules(or components) in a single page, default page based code-splitting is not going to help us. Next.js will include all of these modules in the JavaScript bundle for that page.

That's where Next.js dynamic imports comes handy. With that, you can conditionally load modules as needed. This will open us a lot of capabilities, including:

  • Only load modules as needed for dynamic content (eg:- Blog posts embeds)
  • Lazy load heavy modules (For animations in the home page)
  • Disable running some specific component inside the server
  • Disable loading specific module inside the server
šŸ’” You can achieve all those things with a straightforward API without adding any configuration.

šŸ™ We need your help

We need your help to keep maintain & add new content to this course. Here's how you can support us: