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

Docs

Answer 2

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

检查此链接以获取其文档以供参考：

Nextjs - next.config.js

NextJS环境变量不起作用

2 个答案: