Vercel Next JS 应用程序环境变量不起作用

Question

来自 Ruby Rails，我发现在 NextJS 上，特别是在 Vercell 平台上，很难掌握环境变量的概念。我按照 the NextJS documentation 推荐 Vercell 文档在其项目设置中设置环境变量，即使对于开发环境也是如此。所以我用 vercel env pull .env.local 拉了他们。但是当我运行开发服务器时， process.env 变量总是未定义的。到目前为止，没有找到很多关于此的问题。

我使用的示例代码：

export function getEncodedClientIdAndSecret(): string {
    const clientId = process.env.CLIENT_ID;
    const clientSecret = process.env.CLIENT_SECRET;

    if (!clientId || !clientSecret) {
        throw new Error('Missing client ID or client secret');
    }

    const encodedString = Buffer.from(`${clientId}:${clientSecret}`).toString('base64');
    return `Basic ${encodedString}`;
}

.env.local 文件:

# Created by Vercel CLI
REDIRECT_URI=localhost:3000/api/callback
BASE_URL=localhost:3000
FIREBASE_DATABASE_URL=projectid.firebaseio.com
FIREBASE_CLIENT_EMAIL=dfsdfo@projectid.iam.gserviceaccount.com
FIREBASE_PRIVATE_KEY_B64=longenccryptedprivatekey
FIREBASE_PROJECT_ID=projectid
CLIENT_SECRET=secreiclient
CLIENT_ID=clientid

我不是 JavaScript 的粉丝。这真是令人费解。

Answer 1

过了一段时间，我又运行进入了这个问题。

但这一次，the documentation 中的 NEXT_PUBLIC_ 前缀可以正常工作。我不知道为什么当时我尝试该解决方案时没有。

这是 .env 文件的工作版本：

NEXT_PUBLIC_REDIRECT_URI=<Callback URI from Spotify>
NEXT_PUBLIC_BASE_URL=<Base URL of the project>
NEXT_PUBLIC_CLIENT_ID=<Spotify app client ID>
CLIENT_SECRET=<Spotify app client secret key>
FIREBASE_PROJECT_ID=<Firebase project ID>
FIREBASE_PRIVATE_KEY_B64=<Base64-encoded string of Firebase private key>
FIREBASE_CLIENT_EMAIL=<Firebase client email>
FIREBASE_DATABASE_URL=<Firebase database URL>
WARMUP_KEY=<Secret to trigger Firebase database warmup>

这是我正在处理的PR。

Vercel Next JS 应用程序环境变量不起作用

Vercel NextJS App Environement Variables Not Working

environment-variables

next.js

vercel