What is Environment Variables?
TL;DR
Configuration values in Frontend Accelerator stored in .env files for managing secrets, API keys, and environment-specific settings.
Environment Variables in Frontend Accelerator provide a secure, flexible way to manage configuration across development, staging, and production environments.
File Structure:
- .env.local: Local development secrets (gitignored)
- .env.example: Template showing required variables
- .env.production: Production configuration (via hosting platform)
Example variables:
# Database
DATABASE_SECRET="abcd1234"
# Authentication
NEXTAUTH_URL="https://yourdomain.com"
NEXTAUTH_SECRET="your-secret-key"
# OAuth Providers
GOOGLE_CLIENT_ID="..."
GOOGLE_CLIENT_SECRET="..."
# Payments (Stripe)
STRIPE_SECRET_KEY="sk_test_..."
STRIPE_WEBHOOK_SECRET="whsec_..."
// etc...
Accessing Environment Variables:
Server-Side (API Routes, Server Components):
const apiKey = process.env.STRIPE_SECRET_KEY;
Client-Side (Requires NEXT_PUBLIC_ prefix):
const publicKey = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY;
Security Best Practices:
- Never commit .env.local to version control
- Use different secrets for each environment
- Rotate API keys regularly
- Prefix client-visible variables with NEXT_PUBLIC_
AI-Friendly Pattern:
The .env.example file serves as documentation, allowing AI tools to understand required configuration without exposing actual secrets.