NextJS+TS项目中自动导入目录内TSX组件并生成映射的方法

根据你的需求，以下两种方案可以实现自动导入./contents目录下的TSX组件并构建映射表，无需手动维护导入：

方案一：Pages Router 客户端组件（Webpack require.context） #

Webpack内置的require.context可以批量导入指定目录下的文件，适合Pages Router的客户端渲染场景：

1. 创建自动导入逻辑
   在客户端组件中编写批量导入代码，构建组件映射表：

// components/DocRenderer.tsx
import type { ReactElement } from 'react';

// 批量导入./contents目录下所有TSX文件（不递归子目录）
const docContext = require.context('../contents', false, /\.tsx$/);

// 构建文件名到组件的映射表
const docComponentMap: Record<string, () => ReactElement> = {};

docContext.keys().forEach(filePath => {
  // 提取文件名（去掉./和.tsx后缀）
  const componentName = filePath.replace(/^\.\/(.*)\.tsx$/, '$1');
  // 取默认导出的组件
  docComponentMap[componentName] = docContext(filePath).default;
});

// 文档渲染组件
export default function DocRenderer({ docName }: { docName: string }) {
  const DocComponent = docComponentMap[docName];
  if (!DocComponent) return <div>指定文档不存在</div>;
  return <DocComponent />;
}

2. 添加TypeScript类型支持
   由于require.context是Webpack特性，需要补充类型声明避免TS报错，创建types/webpack.d.ts：

declare module 'webpack' {
  interface RequireContext {
    keys(): string[];
    <T>(id: string): T;
  }
}

declare function requireContext(
  path: string,
  deep?: boolean,
  filter?: RegExp,
  mode?: string
): webpack.RequireContext;

方案二：App Router 场景（服务端读取+客户端动态导入） #

App Router中客户端组件无法直接访问文件系统，需要先在服务端组件读取目录结构，再传递给客户端组件动态导入：

1. 服务端组件读取文档列表
   在服务端组件中获取./contents下的所有文档名称，传递给客户端组件：

// app/docs/page.tsx（服务端组件）
import fs from 'fs/promises';
import path from 'path';
import DocSelector from './DocSelector';

export default async function DocsPage() {
  // 读取contents目录下的TSX文件
  const fileList = await fs.readdir(path.join(process.cwd(), 'app/contents'));
  const docNames = fileList.map(file => file.replace('.tsx', ''));
  
  return <DocSelector docNames={docNames} />;
}

2. 客户端组件动态切换文档
   在客户端组件中根据选中的文档名动态导入对应组件：

// app/docs/DocSelector.tsx（客户端组件）
'use client';
import { useState } from 'react';
import dynamic from 'next/dynamic';

export default function DocSelector({ docNames }: { docNames: string[] }) {
  const [selectedDoc, setSelectedDoc] = useState(docNames[0]);

  // 动态导入选中的文档组件，关闭SSR适配CSR需求
  const DocComponent = dynamic(() => import(`../contents/${selectedDoc}.tsx`), {
    ssr: false,
    loading: () => <div>文档加载中...</div>
  });

  return (
    <div>
      <select 
        value={selectedDoc} 
        onChange={(e) => setSelectedDoc(e.target.value)}
      >
        {docNames.map(name => (
          <option key={name} value={name}>{name}</option>
        ))}
      </select>
      <div className="doc-content">
        <DocComponent />
      </div>
    </div>
  );
}

注意事项 #

• 确保./contents下的所有组件都使用默认导出，否则映射表无法正确获取组件
• App Router场景下，动态导入的路径必须是静态可分析的，避免使用完全动态的路径
• 调整tsconfig.json的include字段，确保contents目录被TypeScript识别：

{
  "include": ["app/**/*", "contents/**/*", "types/**/*"]
}

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