如何在NextJs中使用ViteJs的Glob Import功能

App Router 原生支持（Next.js 13+） #

Next.js 13及以上的App Router基于TurboPack构建，已经原生支持import.meta.glob，用法和Vite完全一致：

// 批量导入components目录下所有.tsx组件（包含子目录）
const componentModules = import.meta.glob('../components/**/*.tsx')

// 按需加载指定组件
async function getComponent(componentPath) {
  const module = await componentModules[componentPath]()
  return module.default
}

注意：路径通配符必须是静态字符串，不能用动态变量，打包工具需要在编译阶段完成依赖分析。

Pages Router 实现方案 #

Pages Router基于Webpack，原生不支持import.meta.glob，可以用以下两种方式实现：

方式1：使用Webpack原生的require.context #

无需额外依赖，直接用Webpack提供的API：

// 导入pages/api目录下所有.ts格式的路由文件
const apiContext = require.context('../pages/api', true, /\.ts$/)
const apiRoutes = {}

// 遍历生成路由映射
apiContext.keys().forEach(filePath => {
  const routeName = filePath.replace(/^\.\/(.*)\.ts$/, '$1')
  apiRoutes[routeName] = apiContext(filePath).default
})

方式2：使用babel插件babel-plugin-import-glob #

1. 安装依赖：

npm install babel-plugin-import-glob --save-dev

2. 在next.config.js中配置babel插件：

module.exports = {
  babel: {
    plugins: ['babel-plugin-import-glob']
  }
}

3. 直接用Vite风格的语法导入：

import * as components from '../components/**/*.tsx'

插件会在编译阶段自动把glob路径转换成具体的import语句，同样要求路径是静态字符串。

通用注意事项 #

• 所有glob导入的路径必须是静态可分析的，不能使用动态生成的路径（如包含变量的模板字符串）。
• 如果需要动态加载组件，App Router推荐结合import()语法，确保路径前缀固定，比如：import(../components/${componentName}.tsx)（Next.js会自动分析所有可能的组件）。

内容的提问来源于stack exchange，提问作者Vũ Hồng Việt