Next.js 14（App Router）服务端读取环境变量的正确方式

我使用NextJS v14的App Router范式，尝试了两种服务端读取环境变量的方法，但均未成功，且希望不将环境变量值暴露到客户端。

.env.local 文件内容 #

MY_ENV_VAR=abc123

方法1 - Server Action #

服务端代码（app/(actions)/foo.ts） #

"use server";

export async function foo() {
  const envVar = process.env.MY_ENV_VAR;
  console.log(envVar); // 输出 '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>;
}

显然，即使是Server Action，若从客户端上下文调用，也会继承客户端环境，这点我理解。

方法2 - API路由 #

服务端代码（app/api/foo/route.ts） #

export async function POST(request: Request) {
  const envVar = process.env.MY_ENV_VAR;
  console.log(envVar); // 仍输出 '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始终为undefined。

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