I don't know shite about:

Import components dynamically with Next.js

Reduce bundle size by dynamically importing react components

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*/}

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

export default function YourDynamicComponent() {

  return (
      <h1>So dynamic and fresh</h1>

🤩 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.