- [Dynamic Imports](#dynamic-imports)

<p><details>

<summary><b>Examples</b></summary>

<ul>

<li><a href="./examples/with-dynamic-import">With Dynamic Import</a></li>

</ul>

</details></p>

Next.js supports TC39 [dynamic import proposal](https://github.com/tc39/proposal-dynamic-import) for JavaScript.

With that, you could import JavaScript modules (inc. React Components) dynamically and work with them.

You can think dynamic imports as another way to split your code into manageable chunks.

Since Next.js supports dynamic imports with SSR, you could do amazing things with it.

Here are a few ways to use dynamic imports.

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(import('../components/hello'))

export default () => (

<div>

<Header />

<DynamicComponent />

<p>HOME PAGE is here!</p>

</div>

)

import dynamic from 'next/dynamic'

const DynamicComponentWithCustomLoading = dynamic(

import('../components/hello2'),

{

loading: () => (<p>...</p>)

}

)

export default () => (

<div>

<Header />

<DynamicComponentWithCustomLoading />

<p>HOME PAGE is here!</p>

</div>

)

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(

import('../components/hello3'),

{ ssr: false }

)

export default () => (

<div>

<Header />

<DynamicComponentWithNoSSR />

<p>HOME PAGE is here!</p>

</div>

)

import { asyncReactor } from 'async-reactor'

const DynamicComponentWithAsyncReactor = asyncReactor(async () => {

const Hello4 = await import('../components/hello4')

return (<Hello4 />)

})

export default () => (

<div>

<Header />

<DynamicComponentWithAsyncReactor />

<p>HOME PAGE is here!</p>

</div>

)