Environment Variables
Learn how to use environment variables in your Next.js project.
The starter project comes with three different environment variables files:
- .env: this is a shared environment file. Here, you can add variables shared across all the environments.
- .env.development: the configuration file loaded when running the
devcommand: by default, we add the Firebase Emulators settings to this file.
- Use this file for your development configuration.
- .env.production: the configuration file loaded when running the
buildcommand locally or deployed to Vercel.
- Use this file for your actual project's configuration (without private keys!).
- .env.test: this environment file is loaded when running the Cypress E2E tests. You would rarely need to use this.
Additionally, you can add another environment file named .env.local: this file is never added to Git and can be used to store the secrets you need during development.
Never add secrets to your .env files
<span className='block'> Never ever add secrets to your .env files. It's not safe, and you risk leaking confidential data. </span>
<span> Instead, add your secrets using your Vercel Console, or use the .env.local file during development. </span>
Adding Environment Variables
The production environment variables template looks like the below:
bash
NEXT_PUBLIC_FIREBASE_API_KEY=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_FIREBASE_AUTH_DOMAIN=NEXT_PUBLIC_SITE_URL=NEXT_PUBLIC_APPCHECK_KEY=NEXT_PUBLIC_REQUIRE_EMAIL_VERIFICATION=falseSERVICE_ACCOUNT_CLIENT_EMAIL=GCLOUD_PROJECT=## SECRET KEYS ARE BEST ADDED TO YOUR CISERVICE_ACCOUNT_PRIVATE_KEY=STRIPE_SECRET_KEY=STRIPE_WEBHOOK_SECRET=