Yarn Berry Monorepo Packages目录Dotenv失效问题求助

核心原因 #

Next.js默认仅加载自身项目根目录的.env文件，不会自动识别Monorepo子模块（packages下的模块）中的.env；同时子模块作为依赖被Next.js打包时，其内部的.env不会被Next.js的构建流程处理，导致process.env.BASE_URL为undefined。

可行解决方法 #

方法1：将公共Env变量统一到Next.js项目根目录 #

这是最简单直接的方案：

• 在Next.js项目的根目录下创建/修改.env文件，添加BASE_URL（客户端使用需加NEXT_PUBLIC_前缀）：

  # 服务端使用
  BASE_URL=https://api.example.com
  # 客户端使用（必须加前缀）
  NEXT_PUBLIC_BASE_URL=https://api.example.com
  

• 子模块的Axios实例直接使用对应变量：

  // packages/api/src/axios.js
  import axios from 'axios';
  
  // 服务端用BASE_URL，客户端用NEXT_PUBLIC_BASE_URL
  const instance = axios.create({
    baseURL: process.env.NEXT_PUBLIC_BASE_URL || process.env.BASE_URL,
  });
  
  export default instance;
  

Next.js构建时会自动将自身.env中的变量注入所有依赖模块（包括Monorepo的packages），无需额外配置。

方法2：子模块手动加载自身.env文件 #

如果必须在子模块中单独维护.env，可借助dotenv手动加载：

1. 在子模块中安装dotenv：

   yarn workspace @your-workspace/api add dotenv
   

2. 在Axios实例文件中手动加载子模块根目录的.env：

   // packages/api/src/axios.js
   import dotenv from 'dotenv';
   import path from 'path';
   import axios from 'axios';
   
   // 加载当前子模块根目录的.env（路径根据实际结构调整）
   dotenv.config({ path: path.resolve(__dirname, '../.env') });
   
   const instance = axios.create({
     baseURL: process.env.BASE_URL,
   });
   
   export default instance;
   

注意：如果子模块被Next.js客户端代码引用，仍需将变量改为NEXT_PUBLIC_前缀，否则客户端无法获取。

方法3：Monorepo根目录统一管理Env变量 #

若多个子模块和Next.js项目共用Env变量，可在Monorepo根目录创建.env文件，然后配置Next.js读取根目录的.env：

1. 在Monorepo根目录创建.env：

   BASE_URL=https://api.example.com
   NEXT_PUBLIC_BASE_URL=https://api.example.com
   

2. 修改Next.js的next.config.js，指定env文件路径：

   // next.config.js
   const path = require('path');
   require('dotenv').config({ path: path.resolve(__dirname, '../.env') });
   
   /** @type {import('next').NextConfig} */
   const nextConfig = {
     // 其他配置
   };
   
   module.exports = nextConfig;
   

此方法下，Next.js会加载根目录的.env，子模块同样可以通过process.env访问变量（服务端），客户端仍需NEXT_PUBLIC_前缀。

额外注意事项 #

• 客户端/服务端区分：如果Axios实例用于Next.js客户端组件，必须使用NEXT_PUBLIC_前缀的变量，否则Next.js会在构建时移除未前缀的变量，导致客户端无法获取。
• Yarn Berry PnP模式：若使用PnP，确保dotenv已正确安装到子模块，路径解析时避免依赖Node.js的默认模块路径（用path.resolve或path.join明确指定）。
• 构建流程：无需单独为子模块配置构建流程，Next.js会将子模块代码打包到自身构建产物中，只要Env变量被正确注入即可正常工作。

内容的提问来源于stack exchange，提问作者김정수