Next.js如何通过环境变量动态导入函数？多站点代码复用方案

ES模块的导入语法要求路径必须是编译时就能确定的静态字符串，而process.env.DEBUG_PATH是运行时才会解析的变量，编译器没法提前识别这个动态路径，所以直接这么写肯定无效。

根据不同的使用场景，给你推荐几种靠谱的方案：

方案1：构建时分支导入（适合单站点构建） #

如果每个站点是单独构建部署的，直接用环境变量做静态分支判断，编译时就把对应站点的代码打包进去，没有冗余。

示例代码：

// 先整个统一的入口文件，比如 utils/index.js
let debug;
// 用NEXT_PUBLIC_前缀确保环境变量能被编译时读取
if (process.env.NEXT_PUBLIC_SITE_ID === 'site-A') {
  ({ debug } = require('../lib/site-A/utils'));
} else if (process.env.NEXT_PUBLIC_SITE_ID === 'site-B') {
  ({ debug } = require('../lib/site-B/utils'));
}
export { debug };

然后在env.local里配置：

NEXT_PUBLIC_SITE_ID=site-A

之后代码里直接导入这个统一入口就行：import { debug } from '../utils'

方案2：运行时动态加载（适合单实例多站点） #

如果要同一个部署实例适配多个站点，需要运行时切换，那就整个站点加载器，动态导入对应模块。

步骤：

1. 目录结构大概这样：

lib/
├── site-A/
│   └── utils.js
├── site-B/
│   └── utils.js
└── site-loader.js

2. 写site-loader.js：

// 把各个站点的模块映射存起来
const siteModules = {
  'site-A': () => import('./site-A/utils'),
  'site-B': () => import('./site-B/utils'),
};

// 导出一个获取站点工具的方法
export async function getSiteUtils() {
  const siteId = process.env.NEXT_PUBLIC_SITE_ID;
  // 动态导入对应模块
  const module = await siteModules[siteId]();
  return module;
}

3. 在组件里用：

import { getSiteUtils } from '../lib/site-loader';

async function MyComponent() {
  const { debug } = await getSiteUtils();
  // 这里就能用debug函数了
}

注意：首次加载会有额外的网络请求，要是在首屏用，记得加个加载状态或者用Suspense包裹。

方案3：SSG/ISR场景下的配置注入（适合静态站点） #

如果你的站点是静态生成（SSG）或者增量静态再生（ISR），可以在数据获取函数里直接根据环境变量导入对应配置，再传给组件。

示例：

// pages/index.js
export async function getStaticProps() {
  // 编译时就会根据环境变量导入对应配置
  const siteConfig = await import(`../lib/${process.env.NEXT_PUBLIC_SITE_ID}/config`);
  return {
    props: {
      config: siteConfig.default,
    },
  };
}

export default function Home({ config }) {
  return (
    <div style={{ background: config.primaryColor }}>
      <h1>{config.title}</h1>
    </div>
  );
}

这种方式完全贴合Next.js的静态渲染逻辑，组件直接用传入的配置，性能拉满。

方案4：Webpack别名映射（进阶玩法） #

修改Next.js的Webpack配置，把环境变量映射成路径别名，编译时自动替换，既保留静态导入的优势，又能动态切换路径。

在next.config.js里加：

module.exports = {
  webpack: (config, { env }) => {
    // 把@site-utils别名指向对应站点的utils目录
    config.resolve.alias['@site-utils'] = `./lib/${env.NEXT_PUBLIC_SITE_ID}/utils`;
    return config;
  },
};

之后代码里直接这么导入就行：

import { debug } from '@site-utils';

编译时Webpack会自动把别名换成实际路径，非常丝滑。

• 单站点单独构建：选方案1或4，打包体积小，性能最好。
• 单实例多站点运行时切换：选方案2，配合加载状态处理。
• 静态/增量静态站点：选方案3，完美适配Next.js的渲染模式。

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