Next.js项目中.env文件移入env文件夹后无法读取的解决方法

Next.js 默认只会扫描项目根目录下的.env系列文件，要让它读取env子文件夹下的环境变量，需要手动加载这些文件，以下是具体解决方法：

方法一：通过next.config.js自动加载（推荐） #

1. 安装依赖
   需要用到dotenv和dotenv-expand（Next.js 内部依赖后者处理变量引用）：

npm install dotenv dotenv-expand --save-dev

2. 修改next.config.js
   在配置文件最顶部添加加载逻辑，根据当前环境自动加载对应优先级的.env文件：

const dotenv = require('dotenv');
const dotenvExpand = require('dotenv-expand');
const path = require('path');

// 按优先级从高到低加载环境文件
const envFiles = [
  `.env.${process.env.NODE_ENV}.local`,
  `.env.${process.env.NODE_ENV}`,
  '.env.local',
  '.env',
];

// 逐个加载env文件夹下的文件
for (const envFile of envFiles) {
  const envPath = path.join(__dirname, 'env', envFile);
  try {
    const envConfig = dotenv.config({ path: envPath });
    dotenvExpand.expand(envConfig);
  } catch (err) {
    // 文件不存在时忽略错误，继续加载下一个
    if (!err.toString().includes('ENOENT')) throw err;
  }
}

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 保留你原有的Next.js配置
};

module.exports = nextConfig;

方法二：通过npm scripts指定（简单场景） #

如果不想修改next.config.js，可通过dotenv-cli在命令行指定环境文件路径：

1. 安装依赖

npm install dotenv-cli --save-dev

2. 修改package.json的scripts：

{
  "scripts": {
    "dev": "dotenv -e ./env/.env.development next dev",
    "build": "dotenv -e ./env/.env.production next build",
    "start": "dotenv -e ./env/.env.production next start"
  }
}

这种方式需要为每个命令手动指定对应环境的文件，适合环境类型较少的场景。

关键说明 #

• 无需修改tsconfig.json：tsconfig.json的include字段是指定TypeScript需要编译的源码文件路径，.env文件不属于源码，添加进去不会让Next.js读取环境变量。
• 客户端暴露规则不变：只有前缀为NEXT_PUBLIC_的环境变量会被自动暴露给客户端代码，其余变量仅在服务端可用。

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