Import components dynamically with Next.js

Today I learned that you can dynamically import components in your Next.js project. According to the Next.js docs your simply import your react component with:

import Dynamic from 'next/dynamic'

const YourDynamicComponent = Dynamic(() => import('../components/hello'))

{/* Use it like any other component*/}
<YourDynamicComponent/>

In this example it is expected that the imported component is default exported.

export default function YourDynamicComponent() {

  return (
    <div>
      <h1>So dynamic and fresh</h1>
    </div>
  )
}

🤩 Interactive Example

Give a try. This example if fully interactive.Just run the Replit.

We're loading a component that displays the current Date and formats it with the luxon library. Both are loaded dynamically.