如何在NextJS中动态导入指定文件夹内的组件？

你的当前实现可以在服务器端场景正常工作，但存在几个局限：

1. 依赖Node.js的fs模块，无法在客户端组件中直接使用（会抛出fs is not defined错误）
2. 仅处理.js扩展名，无法兼容.tsx等其他组件文件格式
3. 运行时扫描文件夹，无法利用Webpack的构建时优化

下面提供几个更通用的替代方案：

方案1：使用Webpack的require.context（推荐） #

利用Webpack的构建时扫描能力，无需运行时文件系统操作，客户端和服务器端都能兼容：

import dynamic from "next/dynamic";

// 扫描components/icons下的所有.js/.tsx文件，不递归子文件夹
const iconContext = require.context(
  "@/components/icons",
  false,
  /\.(js|tsx)$/
);

export const icons = {};

iconContext.keys().forEach((key) => {
  // 提取组件名称（去掉./和扩展名）
  const iconName = key.replace(/^\.\/(.*)\.\w+$/, "$1");
  // 动态导入组件
  icons[iconName] = dynamic(() => iconContext(key));
});

优势： #

• 构建时确定要打包的组件，支持Tree Shaking（如果组件符合条件）
• 客户端、服务器端均能正常运行
• 可通过正则表达式灵活匹配文件格式

方案2：手动维护导出索引（适合组件数量少的场景） #

如果图标组件数量不多，可在icons文件夹下创建index.js手动导出所有组件，再动态导入：

components/icons/index.js

export { default as UserIcon } from "./UserIcon";
export { default as SettingsIcon } from "./SettingsIcon";
// 新增图标时手动添加导出

helper.js

import dynamic from "next/dynamic";
import * as IconExports from "@/components/icons";

export const icons = Object.fromEntries(
  Object.entries(IconExports).map(([name, Component]) => [
    name,
    // 包装为动态导入（如果不需要SSR，可添加{ ssr: false }）
    dynamic(() => Promise.resolve({ default: Component }), { ssr: false })
  ])
);

优势： #

• 完全可控，无需依赖Webpack特性
• 代码更直观，适合小型项目
• 可灵活控制哪些组件被导出

方案3：改进原有方案（仅服务器端使用） #

如果你的场景仅在服务器端运行（比如在getStaticProps、服务器组件中使用），可以优化原有代码的兼容性：

import fs from "fs";
import path from "path";
import dynamic from "next/dynamic";

export const icons = {};

// 仅在服务器端执行文件扫描
if (typeof window === "undefined") {
  const iconDir = path.join(process.cwd(), "components/icons");
  const files = fs.readdirSync(iconDir);

  files.forEach((file) => {
    // 支持多种组件扩展名
    if (file.match(/\.(js|tsx)$/)) {
      const iconName = file.replace(/\.\w+$/, "");
      icons[iconName] = dynamic(() => import(`@/components/icons/${iconName}`));
    }
  });
}

注意： #

• 该方案仅能在服务器端代码中使用，客户端组件导入会导致icons为空对象

内容的提问来源于stack exchange，提问作者Tidris