客戶端不可用的環境變量

Question

我正在按照此處的說明進行操作： https://nextjs.org/docs/api-reference/next.config.js/environment-variables

我的.env.local文件如下（vars censored）：

GRAPHQL_ENDPOINT_FEDERATED="**************"
FIREBASE_API_KEY="**************"
FIREBASE_AUTH_DOMAIN="**************
FIREBASE_DATABASE_URL="**************"
FIREBASE_PROJECT_ID="**************"
FIREBASE_STORAGE_BUCKET="**************m"
FIREBASE_MESSAGING_SENDER_ID="**************"
FIREBASE_APP_ID="**************"
IOS_APP_ID=**************
IOS_BUNDLE_IDENTIFIER="**************"
NEXT_PUBLIC_SECRET_KEY=**************

和我的next.config.js文件：

module.exports = {
    poweredByHeader: false,
    reactStrictMode: true,
    env: {
        GRAPHQL_ENDPOINT_FEDERATED: process.env.GRAPHQL_ENDPOINT_FEDERATED,
        FIREBASE_API_KEY: process.env.FIREBASE_API_KEY,
        FIREBASE_AUTH_DOMAIN: process.env.FIREBASE_AUTH_DOMAIN,
        FIREBASE_DATABASE_URL: process.env.FIREBASE_DATABASE_URL,
        FIREBASE_PROJECT_ID: process.env.FIREBASE_PROJECT_ID,
        FIREBASE_STORAGE_BUCKET: process.env.FIREBASE_STORAGE_BUCKET,
        FIREBASE_MESSAGING_SENDER_ID: process.env.FIREBASE_MESSAGING_SENDER_ID,
        FIREBASE_APP_ID: process.env.FIREBASE_APP_ID,
        IOS_APP_ID: process.env.IOS_APP_ID,
        IOS_BUNDLE_IDENTIFIER: process.env.IOS_BUNDLE_IDENTIFIER
    }
};

我正在用這些變量實例化 firebase 實例，它在服務器上打印得很好，但在客戶端它們都是undefined的所以我的firebase.ts文件就像：

import fb from 'firebase/app'
import 'firebase/auth';
import 'firebase/database';

// firebase Config
const firebaseConfig = {
    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
};

console.log('process.env.FIREBASE_API_KEY : ', process.env.FIREBASE_API_KEY);
console.log('firebase config : ', firebaseConfig);
const firebase = !fb.apps.length ? fb.initializeApp(firebaseConfig) : fb.app()


export default firebase

服務器的輸出： 並在客戶端輸出：

我錯過了什么或做錯了什么？ 結果，我無法使用我的 firebase 實例，並且不斷收到此錯誤：

編輯：看起來對於客戶端可用的變量，它們需要在 env 文件中預先添加NEXT_PUBLIC_ （這也是我的情況）

Answer 1

如果您使用的是 Next.js 9.4 或更高版本，則可以使用更新的添加環境變量的方法（請參閱文檔）。 您可以從next.config.js中刪除變量。