【Next.js】 Dynamic ImportsでローディングUIを設定する方法

Dynamic ImportsでローディングUIを設定するには以下のように記述します。

import dynamic from 'next/dynamic'
 
const Sample = dynamic(
  () => import('../components/Sample'),
  {
    loading: () => <p>Loading...</p>,
  }
)
 
export default function Page() {
  return (
    <div>
      <Sample />
    </div>
  )
}