| File Name | Typical Usage | | :--- | :--- | | .env | The fallback or default file. Contains base variables. | | | Loaded specifically during local development ( npm start or dev ). | | .env.production | Loaded when the app is built for production. | | .env.test | Loaded during unit/integration testing (e.g., Jest). |
// package.json
# .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
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.
"scripts": "dev": "node scripts/validate-dev-env.js && NODE_ENV=development nodemon src/index.js" | File Name | Typical Usage | | :--- | :--- | |
The validation script checks that required .env.development keys exist before the app starts. For complex microservice architectures, you can combine multiple files:
A basic .env.development file looks like this: You must prefix browser-safe variables with NEXT_PUBLIC_
If you have ever cloned a repository, run npm install , and then spent 30 minutes trying to figure out why the API calls are failing, you have felt the pain of missing or misconfigured environment files. This article is your complete guide to understanding, implementing, and mastering .env.development . Before diving into the specific file, let's establish the foundation. An .env file (short for "environment") is a simple text file containing key-value pairs that define environment variables for your application.