Next.js根目录api文件夹读取.env.local环境变量显示undefined问题

1. 移除dotenv相关依赖与代码 #

Next.js 13+会自动加载项目根目录下的.env.local文件，服务器端代码（包括API路由）无需手动配置dotenv，手动调用反而可能干扰默认加载逻辑：

• 卸载dotenv依赖：

npm uninstall dotenv

• 删除router.js中的以下代码：

import * as dotenv from 'dotenv';
dotenv.config();

2. 修正API路由写法 #

App Router规范下的API路由需要导出对应HTTP方法（如GET、POST），而非直接执行函数。修改router.js代码如下：

import mongoose from "mongoose";
import { Dishes } from "./model.js";
import { NextResponse } from "next/server";

// 封装MongoDB连接逻辑，避免重复连接
const connectDB = async () => {
  // 若已连接则直接返回
  if (mongoose.connection.readyState === 1) {
    return mongoose.connection;
  }
  try {
    await mongoose.connect(process.env.MONGO_STRING);
    console.log("Db connected successfully");
    return mongoose.connection;
  } catch (error) {
    console.error("MongoDB连接失败:", error);
    throw new Error("数据库连接失败");
  }
};

// 导出GET方法处理请求
export async function GET() {
  try {
    await connectDB();
    const data = await Dishes.find();
    return NextResponse.json({ result: data });
  } catch (error) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

3. 验证环境变量配置 #

• 确保.env.local文件位于项目根目录，文件名无拼写错误；
• 环境变量值不要添加引号：

MONGO_STRING=mongodb+srv://<my username>:<my pass>@cluster0.i4i4snw.mongodb.net/

• 修改环境变量后，重启Next.js开发服务器（停止next dev后重新启动）。

4. 确认项目结构 #

确保API路由文件位于app/api/目录下，符合App Router的路由规则。

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