客户端不可用的环境变量

Question

I am doing the approach as instructed here: https://nextjs.org/docs/api-reference/next.config.js/environment-variables

My .env.local file is as follows (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=**************

and my next.config.js file:

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
    }
};

I am instantiating the firebase instance with those variables and it prints out fine on the server, but on client they are all undefined So my firebase.ts file is like:

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

Ouputs from server: And outputs on the client:

Am I missing something or doing anything wrong? As a result, I cannot use my firebase instance and I continuously get this error:

EDIT: Looks like for variables to be available to the client, they need to be pre-pended with NEXT_PUBLIC_ in the env file (and this was my case as well)

Answer 1

If you're using Next.js 9.4 or above, you can use the newer approach of adding environment variables (see docs ). You can remove variables from next.config.js .