Hur fungerar miljövariabler i Next.js?

Question

IT Interview Practice · Accepted Answer

Next.js laddar miljövariabler från `.env`-filer, med en viktig säkerhetregel: variabler är **endast för servern som standard**, och endast de med prefixet `NEXT_PUBLIC_` exponeras för webbläsaren.

## Filerna

```text
.env                # loaded in all environments
.env.local          # local overrides — GITIGNORED (put secrets here)
.env.development    # only in `next dev`
.env.production     # only in production builds
```

## Regeln för kritiskt prefix

```bash
# .env.local
DATABASE_URL=postgres://...secret...   # server-only — NEVER sent to the browser
NEXT_PUBLIC_API_URL=https://api.example.com  # exposed to the browser
```

```tsx
// Server Component / Route Handler / Server Action — can read anything
const db = process.env.DATABASE_URL;          // ✅ works on the server

// Client Component — only NEXT_PUBLIC_* are available
"use client";
const api = process.env.NEXT_PUBLIC_API_URL;  // ✅ works
const secret = process.env.DATABASE_URL;      // ❌ undefined in the browser
```

Denna prefixregel är en **säkerhetsfunktion**: den förhindrar dig från att av misstag skicka databaslösenord eller API-hemligheter till klienten. En variabel utan prefix existerar helt enkelt inte i webbläsarpaket.

## Hur NEXT_PUBLIC_-värden bäddas in

```text
NEXT_PUBLIC_* are INLINED at BUILD time (baked into the JS bundle).
```

Eftersom de infogas vid byggtillfället kräver en ändring av ett `NEXT_PUBLIC_`-värde en **ombyggnad** — och du bör aldrig placera verkliga hemligheter bakom prefixet (de skulle vara synliga i paketet för vem som helst).

## Bästa praxis

```text
✓ Secrets (DB URLs, API keys) → no prefix, kept server-side, in .env.local (gitignored)
✓ Public config (public API base, analytics id) → NEXT_PUBLIC_
✓ Commit a .env.example documenting required vars (no real values)
```

## Varför det är viktigt

Modellen endast-för-servern med `NEXT_PUBLIC_`-aktivering är Next.js säkerhetsspärr mot att läcka hemligheter till klienten — ett vanligt, allvarligt misstag.

Att förstå vilka variabler som når webbläsaren, att offentliga värden är inbäddade vid byggtillfället, och var hemligheter lagras (ignorerad `.env.local`) är nödvändigt för både funktionalitet och säkerhet.

Filerna

Regeln för kritiskt prefix

Hur NEXT_PUBLIC_-värden bäddas in

Bästa praxis

Varför det är viktigt

Relaterade frågor