如何使用Next.js的dynamic()方法动态导入多个导出项

你可以直接调整组件统一导出的入口文件逻辑，原有外部导入的用法完全不需要改动，具体实现如下：

方案1：修改sections目录入口文件（推荐） #

直接在统一导出的../components/sections/index.js中，给每个导出组件套上dynamic包裹：

import dynamic from 'next/dynamic'

export const Team = dynamic(() => import('./team'))
export const Gallery = dynamic(() => import('./gallery'))
export const Logos = dynamic(() => import('./logos'))
// 后续新增组件按照相同格式添加即可

修改完成后你原来的批量导入语句可以保持不变：

import * as SectionComponents from "../components/sections";

使用方式也和之前完全一致，直接调用SectionComponents.Team等组件即可。

方案2：不修改入口文件，在导入侧处理 #

如果不想改动sections目录的现有代码，也可以在你需要导入的页面/组件中单独处理：

import dynamic from 'next/dynamic'

const SectionComponents = {
  Team: dynamic(() => import('../components/sections').then(mod => mod.Team)),
  Gallery: dynamic(() => import('../components/sections').then(mod => mod.Gallery)),
  Logos: dynamic(() => import('../components/sections').then(mod => mod.Logos)),
  // 其余组件同理补充
}

补充说明：如果你的组件需要开启服务端渲染，给dynamic添加配置参数即可：dynamic(() => import('./team'), { ssr: true })，默认是关闭服务端渲染的。

内容的提问来源于stack exchange，提问作者Surjith S M