如何更改Next.js中.env文件的查找路径至应用目录外？

方法1：使用Next.js内置的--env-file参数（推荐，Next.js 13.4+） #

Next.js 13.4及以上版本支持直接在启动命令中指定自定义路径的.env文件，无需额外依赖。

修改package.json中的脚本命令，替换为实际的.env文件路径（相对或绝对路径均可）：

{
  "scripts": {
    "dev": "next dev --env-file=../../.env",
    "build": "next build --env-file=../../.env",
    "start": "next start --env-file=../../.env"
  }
}

如果不同环境有对应的.env文件（如.env.development、.env.production），可以分别指定：

{
  "scripts": {
    "dev": "next dev --env-file=../../.env.development",
    "build": "next build --env-file=../../.env.production"
  }
}

方法2：手动通过dotenv加载（兼容旧版本Next.js） #

如果你的Next.js版本低于13.4，或者需要更灵活的配置，可以在next.config.js最顶部加载dotenv，确保在Next.js的内置env机制启动前完成加载。

1. 确保已安装dotenv：

npm install dotenv --save-dev

2. 修改next.config.js：

// 必须放在文件最顶部，优先加载env
const dotenv = require('dotenv');
const path = require('path');

// 替换为你的外部.env文件路径
dotenv.config({ path: path.resolve(__dirname, '../../.env') });

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 你的项目配置项
}

module.exports = nextConfig;

关键注意事项 #

• 客户端环境变量：必须以NEXT_PUBLIC_为前缀，才能被暴露给浏览器端代码；服务端专用的变量不需要前缀，仅在API路由、服务端组件等服务端环境生效。
• 路径正确性：使用相对路径时，要以next.config.js所在的项目根目录为基准；不确定的话，用path.resolve生成绝对路径更可靠。
• 之前dotenv失效的原因：大概率是加载时机不对——Next.js的内置env加载流程会优先执行，如果dotenv的代码放在nextConfig定义之后，就会被Next的配置覆盖，必须把dotenv的加载逻辑放在文件最开头。

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