The next time you start a new project, don't leave your team to guess which variables they need. Write the .env.development file first—and watch your onboarding friction disappear.
# .env.development REACT_APP_API_URL=http://localhost:3001 REACT_APP_ENABLE_MOCKS=true Next.js supports .env.development natively but distinguishes between build-time and run-time variables. You must prefix browser-safe variables with NEXT_PUBLIC_ . .env.development
"scripts": "dev": "node scripts/validate-dev-env.js && NODE_ENV=development nodemon src/index.js" The next time you start a new project,
const env = envSchema.parse(process.env); Here is the golden rule: Anything in a browser-facing .env.development is public. A user can open DevTools and see your REACT_APP_ variables. Never, ever put an admin password, database URI, or private key in a frontend .env.development file. Use a backend proxy instead. Common Pitfalls and How to Fix Them Even experienced developers fall into these traps. Let's troubleshoot the most common problems. Pitfall 1: "My .env.development variables are not loading." Diagnosis: You likely changed the file after the server started. Most dev servers (Webpack, Vite) only read environment files at startup. You must prefix browser-safe variables with NEXT_PUBLIC_
# settings.py import environ env = environ.Env() environ.Env.read_env(os.path.join(BASE_DIR, '.env.development')) To prevent your project from descending into "environment variable hell," follow these battle-tested principles. 1. Always Commit .env.development (With Care) This is a controversial point. You should not commit .env.production (it contains secrets). However, .env.development should be committed to your repository because it contains no real secrets—only local URLs, mock keys, and safe defaults. Committing it ensures all developers on your team have the same baseline configuration.