【Next.js】名前付きエクスポートをダイナミックインポートする方法

名前付きエスクポートをダイナミックインポートするには以下のように記述します。

components/hello.jsx

'use client'
 
export function Hello() {
  return <p>Hello!</p>
}

app/page.jsx

import dynamic from 'next/dynamic'
 
const Hello = dynamic(() =>
  import('../components/hello').then((module) => mod.Hello)
)

// ...

上記でError: Cannot access .then on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.というエラーが発生する場合には以下のように記述します。

import dynamic from 'next/dynamic'
 
const Hello = dynamic(async () => {
  const { Hello } = await import('../components/hello')
  return { default: Hello }
)