You created a .env file with API keys and variables, but process.env.YOUR_VAR returns undefined in your app. Or it works locally but not in production.
Different frameworks and environments load .env files differently. Make sure you're using the correct prefix, loading method, and that variables are exposed to the client properly.
Step-by-Step Guide
React (Create React App): Variables MUST start with REACT_APP_ (e.g., REACT_APP_API_KEY)
Next.js: Use NEXT_PUBLIC_ prefix for client-side variables
Node.js: Install dotenv package and call require('dotenv').config() at app entry point
Vite: Use VITE_ prefix for client-side variables
After changing .env: ALWAYS restart dev server (hot reload doesn't pick up .env changes)
Check .env is in project root (same level as package.json)
Verify .env is not in .gitignore (wait, it should be! Use .env.example for templates)
Production: Set environment variables in your hosting platform (Vercel, Heroku, etc.)
Never commit .env to git - use .env.example with dummy values
Found an issue with this solution?
