繁体   English   中英

客户端不可用的环境变量

[英]Environment variables not available to the client

我正在按照此处的说明进行操作: 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_ (这也是我的情况)

如果您使用的是 Next.js 9.4 或更高版本,则可以使用更新的添加环境变量的方法(请参阅文档)。 您可以从next.config.js中删除变量。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM