使用 next.js 动态导入库 [重复]答案

【问题标题】：Dynamically import a library with next.js [duplicate]使用 next.js 动态导入库 [重复]
【发布时间】：2020-12-31 15:30:05
【问题描述】：

有没有办法将库动态导入到我的 next.js 项目中？还是在初始页面加载后加载？我希望动态导入下面的 toastify 库，因为在有人单击页面上的元素之前并不真正需要它。

尝试了以下但没有运气：

import dynamic from 'next/dynamic'

const { ToastContainer, toast } = dynamic(import('react-toastify'), { ssr: false });

【问题讨论】：

【解决方案1】：

Nextjs中的动态导入

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('../components/hello'))

命名导入 ../components/hello.js

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

导入

import dynamic from 'next/dynamic'

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

多个命名导入 ../components/hello.js

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

导入

import dynamic from 'next/dynamic'

const {Hello,By}= dynamic(() =>
  import('../components/hello').then((mod) => mod),{ssr:false}
)

【讨论】：