c5eb535229
* Expand on the docs for the serverless target * Added catch all routes to API docs * Added caveat for catch all routes * Added link to Rauch's post about serverless * Add mention of `lang` * Add create-next-app to docs * Updated dynamic import examples to be more descriptive * Even better * Clarify valid catch all routes * Removed unexpected word * Apply suggestions from Joe Co-Authored-By: Joe Haddad <joe.haddad@zeit.co> * Keep #setup Co-Authored-By: Joe Haddad <joe.haddad@zeit.co> * Updated docs for the serverless target * Apply suggestions from code review Co-Authored-By: Shu Uesugi <shu@chibicode.com> * Update docs/getting-started.md Co-Authored-By: Shu Uesugi <shu@chibicode.com> * Added suggestion from chibicode Co-authored-by: Joe Haddad <timer150@gmail.com> Co-authored-by: Shu Uesugi <shu@chibicode.com>
124 lines
3 KiB
Markdown
124 lines
3 KiB
Markdown
---
|
|
description: Dynamically import JavaScript modules and React Components and split your code into manageable chunks.
|
|
---
|
|
|
|
# Dynamic Import
|
|
|
|
<details>
|
|
<summary><b>Examples</b></summary>
|
|
<ul>
|
|
<li><a href="https://github.com/zeit/next.js/tree/canary/examples/with-dynamic-import">Dynamic Import</a></li>
|
|
</ul>
|
|
</details>
|
|
|
|
Next.js supports ES2020 [dynamic `import()`](https://github.com/tc39/proposal-dynamic-import) for JavaScript. With it you can import JavaScript modules (inc. React Components) dynamically and work with them. They also work with SSR.
|
|
|
|
You can think of dynamic imports as another way to split your code into manageable chunks.
|
|
|
|
## Basic usage
|
|
|
|
In the following example, the module `../components/hello` will be dynamically loaded by the page:
|
|
|
|
```jsx
|
|
import dynamic from 'next/dynamic'
|
|
|
|
const DynamicComponent = dynamic(() => import('../components/hello'))
|
|
|
|
function Home() {
|
|
return (
|
|
<div>
|
|
<Header />
|
|
<DynamicComponent />
|
|
<p>HOME PAGE is here!</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Home
|
|
```
|
|
|
|
`DynamicComponent` will be the default component returned by `../components/hello`. It works like a regular React Component, and you can pass props to it as you normally would.
|
|
|
|
## With named exports
|
|
|
|
If the dynamic component is not the default export, you can use a named export too. Consider the module `../components/hello.js` which has a named export `Hello`:
|
|
|
|
```jsx
|
|
export function Hello() {
|
|
return <p>Hello!</p>
|
|
}
|
|
```
|
|
|
|
To dynamically import the `Hello` component, you can return it from the [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) returned by [`import()`](https://github.com/tc39/proposal-dynamic-import#example), like so:
|
|
|
|
```jsx
|
|
import dynamic from 'next/dynamic'
|
|
|
|
const DynamicComponent = dynamic(() =>
|
|
import('../components/hello').then(mod => mod.Hello)
|
|
)
|
|
|
|
function Home() {
|
|
return (
|
|
<div>
|
|
<Header />
|
|
<DynamicComponent />
|
|
<p>HOME PAGE is here!</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Home
|
|
```
|
|
|
|
## With custom loading component
|
|
|
|
An optional `loading` component can be added to render a loading state while the dynamic component is being loaded. For example:
|
|
|
|
```jsx
|
|
import dynamic from 'next/dynamic'
|
|
|
|
const DynamicComponentWithCustomLoading = dynamic(
|
|
() => import('../components/hello'),
|
|
{ loading: () => <p>...</p> }
|
|
)
|
|
|
|
function Home() {
|
|
return (
|
|
<div>
|
|
<Header />
|
|
<DynamicComponentWithCustomLoading />
|
|
<p>HOME PAGE is here!</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Home
|
|
```
|
|
|
|
## With no SSR
|
|
|
|
You may not always want to include a module on server-side, For example, when the module includes a library that only works in the browser.
|
|
|
|
Take a look at the following example:
|
|
|
|
```jsx
|
|
import dynamic from 'next/dynamic'
|
|
|
|
const DynamicComponentWithNoSSR = dynamic(
|
|
() => import('../components/hello3'),
|
|
{ ssr: false }
|
|
)
|
|
|
|
function Home() {
|
|
return (
|
|
<div>
|
|
<Header />
|
|
<DynamicComponentWithNoSSR />
|
|
<p>HOME PAGE is here!</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Home
|
|
```
|