diff --git a/docs/advanced-features/dynamic-import.md b/docs/advanced-features/dynamic-import.md index 1122ab5457d843c..a7b4f5eac1ee645 100644 --- a/docs/advanced-features/dynamic-import.md +++ b/docs/advanced-features/dynamic-import.md @@ -13,7 +13,7 @@ description: Dynamically import JavaScript modules and React Components and spli Next.js supports lazy loading external libraries with `import()` and React components with `next/dynamic`. Deferred loading helps improve the initial loading performance by decreasing the amount of JavaScript necessary to render the page. Components or libraries are only imported and included in the JavaScript bundle when they're used. -`next/dynamic` is an extension of [`React.lazy`](https://reactjs.org/docs/code-splitting.html#reactlazy). When used in combination with [`Suspense`](https://reactjs.org/docs/react-api.html#reactsuspense), components can delay hydration until the Suspense boundary is resolved. +`next/dynamic` is a composite extension of [`React.lazy`](https://reactjs.org/docs/code-splitting.html#reactlazy) and [`Suspense`](https://reactjs.org/docs/react-api.html#reactsuspense), components can delay hydration until the Suspense boundary is resolved. ## Example @@ -21,18 +21,13 @@ By using `next/dynamic`, the header component will not be included in the page's ```jsx import dynamic from 'next/dynamic' -import { Suspense } from 'react' const DynamicHeader = dynamic(() => import('../components/header'), { - suspense: true, + loading: () => 'Loading...', }) export default function Home() { - return ( - - - - ) + return } ```