Hvordan fungerer miljøvariabler i Next.js?

Question

IT Interview Practice · Accepted Answer

Next.js laster miljøvariabler fra `.env`-filer, med en viktig sikkerheitsregel: variabler er **bare server-siden som standard**, og bare de som er prefikset med `NEXT_PUBLIC_` blir eksponert for nettleseren.

## Filene

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

```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 prefiksregelen er en **sikkerhetsfunksjon**: den hindrer deg fra å ved et uhell sende databasepassord eller API-hemmeligheter til klienten. En variabel uten prefiks eksisterer ganske enkelt ikke i nettleserbunter.

## Hvordan NEXT_PUBLIC-verdier blir innebygd

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

Fordi de blir gjort inline ved byggetid, krever det å endre en `NEXT_PUBLIC_`-verdi en **gjenbygging** — og du bør aldri plassere ekte hemmeligheter bak prefikset (de ville være synlige i pakken for alle).

## Beste 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 dette er viktig

Server-bare-som-standard-modellen med `NEXT_PUBLIC_` opt-in er Next.js sin veileder mot å lekke hemmeligheter til klienten — en vanlig, alvorlig feil.

Å forstå hvilke variabler som når nettleseren, at offentlige variabler er byggetid-inline, og hvor man skal lagre hemmeligheter (ignorert `.env.local`) er essensielt for både funksjonalitet og sikkerhet.

Filene

Den kritiske prefiksregelen

Hvordan NEXT_PUBLIC-verdier blir innebygd

Beste praksis

Hvorfor dette er viktig

Relaterte spørsmål