Environment Variables

Before going live to production, it's crucial to set the correct environment variables for your production environment. As we've already seen before, you can organize your environment variables into three files:

  • .env: here, you can add variables that are shared across environments
  • .env.local: here go the variables that should be limited to your own machine, and it's recommended not to check this file in your VCS
  • .env.development: here, you can add the variables that should only be used during development
  • .env.production: here, you add the variables that should be used in your production environment

Typically, you would never place private data in your .env.production file because that would cause your data to be leaked.

You should set any value that is not secret or confidential (such as the API Key of your Firebase project or the value of a feature flag) in the .env.production file.

Alternatively, suppose you are using variables such as the project's private key or any value that is supposed to be secret: in that case, you should ensure to inject these values from a secure environment, for example, your CI or your Vercel console.

Shared Variables

As mentioned above, we can add variables shared across environments in the .env configuration file. MakerKit's .env template looks like the below:

# firebase
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID='
NEXT_PUBLIC_SITE_URL=
FIREBASE_CLIENT_EMAIL=
GCLOUD_PROJECT=

Local Variables

To use data that is only limited to your machine, use a .env.local configuration file. Do not check this file in your VCS: therefore, you can use it to set private variables:

FIREBASE_PRIVATE_KEY=
SECRET_KEY_THAT_SHOULD_NOT_BE_EXPOSED=

Development Variables

In our .env.development configuration, we will set variables such as the Firebase Emulator's configuration that will only run when running next dev, e.g., when we're developing the application:

NEXT_PUBLIC_EMULATOR=true
FIRESTORE_EMULATOR_HOST=localhost:8080
FIREBASE_AUTH_EMULATOR_HOST=localhost:9099
FIREBASE_STORAGE_EMULATOR_HOST=localhost:9199
FIREBASE_PUBSUB_EMULATOR_HOST=localhost:8085
NEXT_PUBLIC_FIREBASE_EMULATOR_HOST=localhost
NEXT_PUBLIC_FIRESTORE_EMULATOR_PORT=8080
NEXT_PUBLIC_FIREBASE_AUTH_EMULATOR_PORT=9099
NEXT_PUBLIC_FIREBASE_STORAGE_EMULATOR_PORT=9199
FEATURE_FLAG=true

Production Variables

In our .env.production configuration, we will set variables for the production application.

NEXT_PUBLIC_SITE_URL=https://myamazingapp.com
FEATURE_FLAG=false

Careful! Do not add sensitive data here. Instead, add it from your CI or Vercel Console.


Stay informed with our latest resources for building a SaaS

Subscribe to our newsletter to receive updates