コンテンツにスキップ
ドキュメントエラー`next/dynamic` で複数のモジュールを一度にロードする方法は非推奨になりました

`next/dynamic` で複数のモジュールを一度にロードする方法は非推奨になりました

このエラーが発生した理由

Reactの実装（`React.lazy` と `Suspense`）に近づけるため、`next/dynamic` で複数のモジュールを一度にロードする機能は非推奨になりました。

この動作に依存するコードの更新は比較的簡単です。アプリケーションの移行を支援するために、変更前/変更後の例を用意しました。

修正方法

各モジュールに個別の動的呼び出しを使用するように移行します。

変更前

example.js
import dynamic from 'next/dynamic'
 
const HelloBundle = dynamic({
  modules: () => {
    const components = {
      Hello1: () => import('../components/hello1').then((m) => m.default),
      Hello2: () => import('../components/hello2').then((m) => m.default),
    }
 
    return components
  },
  render: (props, { Hello1, Hello2 }) => (
    <div>
      <h1>{props.title}</h1>
      <Hello1 />
      <Hello2 />
    </div>
  ),
})
 
function DynamicBundle() {
  return <HelloBundle title="Dynamic Bundle" />
}
 
export default DynamicBundle

変更後

example.js
import dynamic from 'next/dynamic'
 
const Hello1 = dynamic(() => import('../components/hello1'))
const Hello2 = dynamic(() => import('../components/hello2'))
 
function HelloBundle({ title }) {
  return (
    <div>
      <h1>{title}</h1>
      <Hello1 />
      <Hello2 />
    </div>
  )
}
 
function DynamicBundle() {
  return <HelloBundle title="Dynamic Bundle" />
}
 
export default DynamicBundle