Next.js 13中.env.local环境变量读取显示undefined问题求助

首先确认你的文件夹结构：项目根目录下包含utils文件夹和.env.local文件，utils内的代码尝试读取根目录.env.local中的环境变量，但输出undefined。以下是具体解决步骤：

1. 校验.env.local文件格式 #

• 打开根目录的.env.local，确保变量定义没有多余空格、引号或语法错误，格式应为：

  GOOGLE_ID=你的谷歌ID
  GOOGLE_CLIENT_SECRET=你的谷歌客户端密钥
  

2. 手动加载环境变量（普通Node.js项目） #

如果你的项目不是Next.js、Vite这类自带环境变量加载的框架，需要借助dotenv包手动读取：

• 安装dotenv依赖：

  npm install dotenv --save-dev
  

• 在utils文件夹的代码文件顶部添加加载代码，注意路径要指向根目录的.env.local：

  // CommonJS语法
  require('dotenv').config({ path: '../.env.local' });
  
  // ES模块语法（如果用import）
  import dotenv from 'dotenv';
  dotenv.config({ path: '../.env.local' });
  

3. 框架专属配置（以Next.js为例） #

如果是Next.js项目：

• 服务端运行的utils代码无需前缀，但客户端代码需要变量名以NEXT_PUBLIC_开头（比如NEXT_PUBLIC_GOOGLE_ID）
• 修改.env.local后必须重启开发服务器，否则新变量不会生效
• 检查next.config.js是否有自定义配置干扰环境变量加载

4. 排查路径问题 #

确认dotenv.config中的相对路径是否正确，如果utils是嵌套更深的目录，要对应调整路径（比如../../.env.local）

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