Environment Variables

Overview

Environment variables store configuration values and secrets that your application needs, like API keys and database URLs. They're kept separate from code so different environments (development, preview, production) can use different values.

Types of Environment Variables

Vercel supports different environment variables for different contexts:

Accessing Variables in Code

In Next.js projects, access environment variables using:

// Server-side (API routes, getServerSideProps, etc.)
const apiKey = process.env.API_KEY;
const dbUrl = process.env.DATABASE_URL;

// Client-side (NEXT_PUBLIC_ prefix required)
const publicKey = process.env.NEXT_PUBLIC_FIREBASE_API_KEY;

// Example usage
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

Managing Variables

For Olive Code projects, environment variables are typically pre-configured. If you need to view or modify them:

1. Via Vercel Dashboard

   Go to vercel.com → Select Project → Settings → Environment Variables

2. Via Vercel CLI

   Use vercel env ls to list variables and vercel env add to add new ones.

3. Local Development

   Create a .env.local file (gitignored) with your local development values.

# .env.local (for local development)
NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
# ... other variables

Common Variables

Here are environment variables commonly used in Olive Code projects: