Using Dynamic Imports

Add Dynamic Imports Support

Using Next.js dynamic imports is very simple.

Open the components/Code.js and replace the current import of CodeWithSyntax module with this:

import dynamic from 'next/dynamic'

const CodeWithSyntax = dynamic(() => import('./CodeWithSyntax'))

Here we use the next/dynamic helper from Next.js and Webpack's dynamic import functionality. The next/dynamic utility helps us to add some additional functionality over Webpack's implementation. We will look at them very soon.

Here's a simple task for you.

  • Add above changes and run your app
  • Visit the homepage & reload it
  • Then click the first blog post with the title: "Blogpost with Code"

(Try to do this for a couple of times)

Q: How do you describe the experience?

šŸ™ We need your help

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