Environment Variables

Field Details
Status Active
Last Updated 05-12-2026

Purpose

To define safe practices for using environment variables in frontend applications, where all values are exposed to the client at runtime

Scope

Applies to: All frontend applications

Does not apply to: Backend services, CI/CD pipelines

Key Awareness

Frontend environment variables are bundled into the JavaScript at build time and are fully visible in the browser. Treat them as public constants, not secrets.

// Any env var prefixed for the frontend is visible here:
Browser DevTools → Sources → bundle.js

File Management

.env                # committed — dummy/example values
.env.local          # gitignored — real local values
.env.production     # gitignored — real prod values (set on CI)
  • Commit .env (or .env.example) with dummy/safe defaults so new developers know what variables exist.
  • Never commit .env.local, .env.production, or any file containing real values.

.gitignore

.env
.env.local
.env.production
.env.*.local

Type Safety & Validation

Validate all environment variables at build time so missing values fail fast.

// lib/env.ts
const publicEnv = {
  apiUrl: process.env.NEXT_PUBLIC_API_URL,
  sentryDsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  appEnv: process.env.NEXT_PUBLIC_APP_ENV,
} as const

// Validate on import
for (const [key, value] of Object.entries(publicEnv)) {
  if (!value) {
    throw new Error(`Missing environment variable: ${key}`)
  }
}

export default publicEnv

Exceptions

No exceptions. Frontend env vars are always public — never use them for secrets.

Changelog

Version Date Author Change
1.0.0 05-12-2026 Tibin Sunny Initial version