NextJS 环境变量不起作用

Question

我已经研究了至少一个小时，到目前为止我都被难住了。也许我不理解文档或中等文章。但是，据我所知，NextJS（我已经安装了最新版本）提供了一个内置的 env 变量解决方案。所以，不需要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就成功连接了？

Answer 1

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

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

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk

文档