Environment Variables
Environment variables are secret notes for your app. API keys, database passwords, configuration—all the stuff that changes between your laptop and production.
What Are Environment Variables?
Think of environment variables as secret notes you slip to your app. Instead of hardcoding sensitive stuff like mySecretPassword123 directly in your code, you store it outside and reference it by name.
Your code says process.env.DATABASE_URL and the system fills in the actual value. Different environments (local, staging, production) can have different values.
Why This Matters
If you push API keys to GitHub, bots will find them within minutes. People have lost thousands to leaked AWS keys. Env vars keep secrets out of your code.
Local vs Production
💻 Local Development
Uses .env.local file in your project root.
- • Test API keys
- • Local database URL
- • Debug mode enabled
🚀 Production (Vercel)
Set in Vercel dashboard under Project Settings → Environment Variables.
- • Live API keys
- • Production database
- • Real Stripe keys
The .env.local File
Create a file called .env.local in your project root. Each line is a key-value pair.
# .env.local
# Database
DATABASE_URL="postgresql://user:pass@host/db"
# Auth
AUTH_SECRET="your-super-secret-key"
AUTH_GOOGLE_ID="123456.apps.googleusercontent.com"
AUTH_GOOGLE_SECRET="GOCSPX-xxxxx"
# Stripe
STRIPE_SECRET_KEY="sk_test_xxxxx"
STRIPE_WEBHOOK_SECRET="whsec_xxxxx"
# Public (exposed to browser)
NEXT_PUBLIC_APP_URL="http://localhost:3000"
Critical: Add to .gitignore
Your .gitignore should include .env.local and .env*.local. Never commit secrets!
Public vs Private Variables
Private (Server Only)
Regular env vars like DATABASE_URL are only available on the server. They never reach the browser. Perfect for secrets.
// This works in API routes or server components
const db = process.env.DATABASE_URL;
// This is undefined in the browser!
Public (Browser Accessible)
Variables starting with NEXT_PUBLIC_ are bundled into your JavaScript and visible to anyone. Use for non-sensitive config only.
// .env.local
NEXT_PUBLIC_APP_URL="https://saucytech.com"
// Available everywhere, including browser
const url = process.env.NEXT_PUBLIC_APP_URL;
Good for NEXT_PUBLIC_
Site URL, Stripe publishable key, analytics IDs, feature flags. Never API secrets!
Adding to Vercel
Go to Project Settings
In Vercel dashboard, select your project → Settings → Environment Variables
Add Each Variable
Enter the name (e.g., DATABASE_URL) and value. Choose which environments: Production, Preview, Development.
Redeploy
New env vars require a redeploy to take effect. Go to Deployments → click the three dots → Redeploy.
Vercel CLI Shortcut
Run vercel env pull to download your production env vars to a local .env.local file. Great for syncing!
Typical Variables for SaucyTech Stack
| Variable | What it's for |
|---|---|
| DATABASE_URL | Neon PostgreSQL connection string |
| AUTH_SECRET | NextAuth.js session encryption |
| AUTH_GOOGLE_ID | Google OAuth client ID |
| AUTH_GOOGLE_SECRET | Google OAuth client secret |
| STRIPE_SECRET_KEY | Stripe API secret key |
| STRIPE_WEBHOOK_SECRET | Stripe webhook signature verification |
| NEXT_PUBLIC_APP_URL | Your app's public URL |
| NEXT_PUBLIC_STRIPE_KEY | Stripe publishable key (safe for browser) |
Common Pitfalls
"I committed my .env file!"
Secrets are now in Git history forever. Even if you delete the file, it's in the commit history.
Fix: Rotate all exposed keys immediately. Add .env.local to .gitignore before your next commit. Consider using git-filter-repo to scrub history.
"process.env.X is undefined"
The variable isn't set, or you're accessing a server variable from the browser.
Fix: Check spelling. Restart your dev server after changing .env.local. For browser access, prefix with NEXT_PUBLIC_.
"Works locally but not in production"
You forgot to add the env var in Vercel, or there's a typo.
Fix: Check Vercel Settings → Environment Variables. Make sure it's enabled for Production. Redeploy after adding.
"Using test keys in production"
Stripe test keys (sk_test_) don't process real payments.
Fix: Use sk_live_ keys in production Vercel settings, sk_test_ locally. Never mix them up!
Ready to deploy?
Now that your secrets are secure, learn how to deploy to Vercel.
Vercel Deployment Guide →