next-lazy-header.jsx

import dynamic from 'next/dynamic'
const NavMenu = dynamic(
  () => import('./NavMenu'),
  { loading: () => <p>Loading...</p> }
)

function Header() {
  const [showMenu, setShowMenu] = useState(false)

  return (
    <div>
      {showMenu && <NavMenu />}
    </div>
  )
}

export default Header