The newest iteration of Nextjs supports ES2020 dynamic import.

The syntax is a bit different from your traditional import statement, You shall import next/dynamic as

import dynamic from 'next/dynamic'
  • Now, with default export

     const MyComponent= dynamic(() => import("../components/MyComponent"));
  • With named export

     const MyNamedComponent= dynamic(() => import('../components/MyNamedComponent').then((mod) => mod.MyNamedFunction))

Now, you can use imported components similar to the normal components.

Moreover, you can also specify to show loading animation while the dynamic component loads up with passing { loading: () => <h2> Loading... </h2> } as the second parameter to the dynamic() function as,

const MyComponentWithLoading = dynamic(() => import('../components/ComponentWithLoading'),{ loading: () => <h2>Loading...</h2> })

You can find more here, Next.js Dynamic Import.

Hope that helped. Cheers!

Thank you.

Related Query

More Query from same tag