How to organize environment configuration (env) in React?

Question

Accepted Answer

**Environment configuration** — a way to store secrets and settings (API URLs, keys) separately for dev, staging, and production.

**Why it matters:** Hardcoding API URLs or secrets directly in source code is a security risk and makes deployment painful. Environment variables let you change behavior per deployment target without modifying code. A single codebase can connect to a local dev server, a staging API, and a production database just by changing the `.env` file.

**In Create React App / Next.js:**
```bash
# .env (common variables)
REACT_APP_API_URL=https://api.myapp.com
REACT_APP_TITLE=My App

# .env.local (personal, not committed)
REACT_APP_API_KEY=secret-key

# .env.development
REACT_APP_API_URL=http://localhost:3001

# .env.production
REACT_APP_API_URL=https://api.myapp.com
```

**Usage in code:**
```jsx
const API_URL = process.env.REACT_APP_API_URL;
const isDev = process.env.NODE_ENV === "development";

fetch(`${API_URL}/users`);
```

**In Next.js (App Router):**
```bash
# .env.local
DATABASE_URL=postgresql://...

# .env.development.local
DATABASE_URL=postgresql://localhost:5432/mydb
```

```tsx
// Only for server components
const dbUrl = process.env.DATABASE_URL;

// For client components (only NEXT_PUBLIC_)
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
```

**How environment variable priority works:**
1. `.env` — base configuration, checked into git.
2. `.env.local` — personal overrides, NOT checked into git.
3. `.env.development` / `.env.production` — environment-specific.
4. `.env.development.local` — personal + environment-specific (highest priority).

More specific files override less specific ones.

**Common mistakes:**
- Using `NEXT_PUBLIC_` prefix for secrets (they get bundled into client JS).
- Forgetting to restart the dev server after changing `.env` files.
- Not adding `.env.local` to `.gitignore` (leaks secrets).

**Important rules:**
- **NEVER** store secrets in client code (even in .env).
- `NEXT_PUBLIC_` or `REACT_APP_` — only for client-side variables.
- Add `.env.local` to `.gitignore`.

React: How to organize environment configuration (env) in React?