Environment Variables Explained for Non-Technical Founders

Environment variables are configuration values that change between environments (development, staging, production). Instead of hardcoding your database URL or API key directly in your code, you store it in an environment variable. This keeps secrets out of your codebase and lets the same code run with different configurations.

If your API keys are in your code (and your code is on GitHub), anyone can find and use them. Environment variables keep secrets separate from code. They also let you use different databases, API endpoints, and settings for development vs production without changing code.

In development, you create a .env.local file (which is NOT committed to Git) with your values: DATABASE_URL=postgresql://... and API_KEY=sk-123... Your code reads these with process.env.DATABASE_URL. In production, you set these same values in your hosting platform's dashboard. The code stays the same - only the values change.

In Next.js, variables prefixed with NEXT_PUBLIC_ are exposed to the browser - anyone can see them in the page source. Only use this prefix for values that are safe to be public, like your Supabase project URL. Everything else (database passwords, API secret keys, webhook secrets) should be server-only - no NEXT_PUBLIC_ prefix. In Vite, the equivalent prefix is VITE_.

Step 1: Create a .env.local file in your project root. Step 2: Add .env.local to your .gitignore (so it's never committed). Step 3: Add all configuration values to this file. Step 4: In your hosting platform (Vercel, Netlify, Railway), add the same variables in the project settings. Step 5: Create a .env.example file (committed to Git) listing every required variable with placeholder values, so anyone setting up the project knows what's needed.