如何在NextJS中读取服务器端环境变量

Question

将 NextJS v14 与应用程序路由器范例结合使用。我尝试了两种不同的高级方法来读取服务器端代码中的环境变量，但都不起作用。如何在不暴露客户端环境变量值的情况下实现此目的？

.env.local

MY_ENV_VAR=abc123

方法 1 - 服务器操作

app/(actions)/foo.ts 中的服务器代码：

"use server";

export async function foo() {
  const envVar = process.env.MY_ENV_VAR;
  console.log(envVar); // prints 'undefined'
}

客户端代码：

"use client";
import { foo } from "@/app/(actions)/foo";

export default function Component() {
  const submit = async () => {
    await foo();
    console.log("Done");
  };

  return <button onClick={() => submit()}>Click me</button>;
}

显然，即使作为服务器操作，如果从客户端上下文调用该函数，它也会继承客户端的环境。很烦人，但我明白为什么这段代码不起作用。

方法 2 - API 路由

app/api/foo/route.ts 中的服务器代码：

export async function POST(request: Request) {
  const envVar = process.env.MY_ENV_VAR;
  console.log(envVar); // still prints 'undefined'
  return new Response();
}

客户端代码：

"use client";

export default function Component() {
  const submit = async () => {
    await fetch("/api/foo", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
    });
    console.log("Done");
  };

  return <button onClick={() => submit()}>Click me</button>;
}

不明白为什么这种方法不起作用。它确实正确地调用了服务器端代码（可以看出，因为它正在将消息打印到我正在运行

next dev

的终端），只是

process.env.MY_ENV_VAR

仍然未定义。

Answer 1

解决方案是将

.env.local

配置文件放在项目根目录中，而不是放在

app/

下