Hvordan fungerer miljøvariabler i Next.js?

Question

Accepted Answer

Next.js indlæser miljøvariabler fra `.env`-filer, med en vigtig sikkerhedsregel: variabler er **kun serverbaseret som standard**, og kun dem, der er præfikset med `NEXT_PUBLIC_`, bliver eksponeret til browseren.

## Filerne

```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
```

## Den kritiske præfiks-regel

```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
```

Denne præfiks-regel er en **sikkerhedsfunktion**: den forhindrer dig i at sende databaseadgangskoder eller API-hemmeligheder til klienten ved et uheld. En ikke-præfikseret variabel eksisterer simpelthen ikke i browser-bundles.

## Hvordan NEXT_PUBLIC-værdier indlejres

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

Fordi de indlejres på build-tid, kræver ændring af en `NEXT_PUBLIC_`-værdi en **genopbygning** — og du bør aldrig placere rigtige hemmeligheder bag præfikset (de ville være synlige i bundtet for alle).

## Bedste praksis

```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)
```

## Hvorfor det betyder noget

Server-kun-som-standard-modellen med `NEXT_PUBLIC_`-tilvalget er Next.js's værn mod at lække hemmeligheder til klienten — en almindelig, alvorlig fejl.

Forståelse af, hvilke variabler der når browseren, at offentlige bliver bygget-tid indlejret, og hvor man lagrer hemmeligheder (gitignoreret `.env.local`), er afgørende for både funktionalitet og sikkerhed.