動的インポートをつかってNext.jsでサーバサイドレンダリングしないコンポーネントをつくる（名前付きエクスポート編） 💻

かつて、 動的インポートを使ってNext.jsでサーバサイドレンダリングしないコンポーネントをつくったこと がありました。

blog.kimizuka.org

このときは、default export を使ってエクスポートしているコンポーネントを対象にしていたのですが、名前付きのエクスポートを使っている場合はどのように書けば良いのかなと調べてみました。

結果としては こちら 。

nextjs-ja-translation-docs.vercel.app

export function Hello() {
  return <p>Hello!</p>;
}

というコンポーネントを動的インポートで読み込みたい場合は、

const DynamicComponent = dynamic(() => import('../components/hello').then(module => module.Hello));

という感じで、thenを使ってリターンすれば良いようです。