NextJS 环境变量不起作用答案

【问题标题】：NextJS environment variables aren't workingNextJS 环境变量不起作用
【发布时间】：2020-11-25 03:40:54
【问题描述】：

我已经为此研究了至少一个小时，但到目前为止我很困惑。也许我不理解文档或媒体文章。但是，据我了解，NextJS（我已经安装了最新版本）提供了一个内置的环境变量解决方案。所以，不需要dotenv 包。

由于设置了 NextJS，我需要做的就是创建一个 env.local 来存储我的 API_KEY 和其他敏感信息。然后，一旦我保存了更新后的文件，我应该能够访问${process.env.API_KEY} 并可以在我的代码中的任何位置访问该值。

如果上述陈述属实，我无法让它发挥作用。

就我而言，我使用环境变量连接到 Firebase。在下面的代码中，它正在被实现。我收到 500 格式错误：

Connection GRPC stream error. Code: 3 Message: 3 INVALID_ARGUMENT: 
Project id parakeat-a1-7706, is malformed: it either contains invalid 
characters or is too long. Look at https://cloud.google.com
/resource-manager/docs/creating-managing-projects#identifying_projects 
for instructions in how to get a project's id.

import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';
import 'firebase/analytics';

const config = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID,
  measurementId: process.env.FIREBASE_MEASUREMENT_ID,
};
// Initialize Firebase
try {
  firebase.initializeApp(config);
} catch (err) {
  // we skip the "already exists" message which is
  // not an actual error when we're hot-reloading
  if (!/already exists/.test(err.message)) {
    console.error('Firebase initialization error', err.stack);
  }
}

// const firebaseAnalytics = firebase.analytics();
const firebaseStorage = firebase.storage();
const firebaseFirestore = firebase.firestore();

export { firebaseStorage, firebaseFirestore };

上面显示的ID是正确的，那么有什么问题吗？为什么如果我直接把实际值放入并跳过它成功连接的process.env？

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

默认情况下，通过.env.local 加载的所有环境变量仅在 Node.js 环境中可用（在 getStaticProps 等方法中），这意味着它们不会暴露给浏览器。

为了向浏览器公开变量，您必须在变量前面加上NEXT_PUBLIC_。例如：

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk

Docs

【讨论】：

嗯，我相信添加 NEXT_PUBLIC ... 前缀也会导致给定的环境变量也暴露给客户端。这对 API_KEYS 和我们想要保护的其他信息不利
为您提供的网络配置 Firebase 旨在用于客户端。看看这个question。对于要在客户端和服务器端使用的环境变量，请添加 NEXT_PUBLIC 前缀。对于您只想在服务器端使用的环境变量，请不要添加前缀。
啊，非常感谢。这增加了很多清晰度，所以在这种情况下，我不需要 process.env 所有这些值。关于你最后的评论，我认为你的陈述存在矛盾。 “对于您要在客户端和服务器端使用的环境变量，请添加 NEXT_PUBLIC 前缀。对于您只想在服务器端使用的环境变量，请不要添加前缀。” “您不希望在客户端显示该私钥，这意味着您应该为该密钥添加 NEXT_PUBLIC 前缀。”是不是打错字了？
哦，对了，这是一个错字。我将删除它，以免混淆其他人。这就是我的意思：Firebase 还为您提供了一个私钥，供您使用 Firebase Admin SDK。您不希望在客户端显示该私钥，这意味着您不应为该密钥添加 NEXT_PUBLIC 前缀。
你好。我试图在这里做同样的事情。我有带有密钥的 firebaseConfig.js 文件。我用我的秘密资料创建了一个env.local 文件。并使用与本问题顶部所述相同的语法设置配置对象。问题是我收到一个错误FIREBASE FATAL ERROR: Can't determine Firebase Database URL. Be sure to include a Project ID when calling firebase.initializeApp()

【解决方案2】：

我之前使用过上述解决方案，但后来需要在包中包含我的 .env 变量，这就是我使用 next.config.js 文件来存放我的变量的原因。

查看此链接到他们的文档以供参考：

Nextjs - next.config.js

【讨论】：

文档说下面的版本9.4 有我在上面尝试的内置解决方案。它说使用.env.local 会将变量暴露给我的应用程序。嗯..