next.js 环境变量未定义（“next”：“13.1.6”）

Question

我知道以前曾有人问过这个问题，但没有一个答案能解决我的问题。

我尝试在下一个 j 中使用 typescript 中的环境变量，但出现此错误：

“字符串|未定义”类型的参数不能分配给“字符串”类型的参数。 类型“未定义”不能分配给类型“字符串”。

我的环境变量名为：

NEXT_PUBLIC_MONGODB_URI

并且

.env

文件位于我的项目的根目录中

我在一个名为 db.ts 的文件中使用它，该文件位于 /my-project/utils/db.ts 中，如下所示：

import mongoose, { ConnectionStates } from 'mongoose';

interface IConnection {
  isConnected: ConnectionStates | null;
}
const connection: IConnection = {
  isConnected: null
};

async function connect() {
  if (connection.isConnected !== null) {
    console.log('already connected');
    return;
  }
  if (mongoose.connections.length > 0) {
    connection.isConnected = mongoose.connections[0].readyState;
    if (connection.isConnected === 1) {
      console.log('use previous connection');
      return;
    }
    await mongoose.disconnect();
  }
  const db = mongoose.connect(process.env.NEXT_PUBLIC_MONGODB_URI);
}

Answer 1

这不是“next.js 环境变量未定义”问题。由于您已添加前缀

NEXT_PUBLIC

，您可以在实验应用程序目录或常规客户端目录上访问该环境变量。该错误与打字稿有关。你必须用

as string

来投射它

const db = mongoose.connect(process.env.NEXT_PUBLIC_MONGODB_URI as string);

如果您

console.log("dada", process.env.NEXT_PUBLIC_MONGODB_URI)

在应用程序目录文件上，您应该在终端上看到日志，或者在客户端目录文件中，您可以在浏览器终端上看到日志。

Answer 2

如果您想访问客户端组件中的环境变量，您应该添加

NEXT_PUBLIC_

即名称将从

NEXT_PUBLIC_

开始