Πώς λειτουργούν οι μεταβλητές περιβάλλοντος στο Next.js;

Question

Accepted Answer

Το Next.js φορτώνει μεταβλητές περιβάλλοντος από αρχεία `.env`, με έναν σημαντικό κανόνα ασφάλειας: οι μεταβλητές είναι **μόνο στο διακομιστή από προεπιλογή** και μόνο εκείνες με πρόθεμα `NEXT_PUBLIC_` εκτίθενται στο πρόγραμμα περιήγησης.

## Τα αρχεία

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

## Ο κανόνας κρίσιμου προθέματος

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

Αυτός ο κανόνας προθέματος είναι ένα **χαρακτηριστικό ασφάλειας**: σας εμποδίζει να στείλετε κατά λάθος κωδικούς πρόσβασης βάσης δεδομένων ή μυστικά API στον πελάτη. Μια μεταβλητή χωρίς πρόθεμα απλώς δεν υπάρχει σε πακέτα προγράμματος περιήγησης.

## Πώς ενσωματώνονται οι τιμές NEXT_PUBLIC

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

Επειδή ενσωματώνονται κατά τη διάρκεια της κατασκευής, η αλλαγή μιας τιμής `NEXT_PUBLIC_` απαιτεί **ανακατασκευή** — και δεν πρέπει ποτέ να τοποθετήσετε αληθινά μυστικά πίσω από το πρόθεμα (θα ήταν ορατά στο πακέτο σε οποιονδήποτε).

## Βέλτιστες πρακτικές

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

## Γιατί είναι σημαντικό

Το μοντέλο μόνο διακομιστή από προεπιλογή με την επιλογή `NEXT_PUBLIC_` είναι η φρακτη του Next.js εναντίον της διαρροής μυστικών στον πελάτη — ένα συνηθισμένο, σοβαρό λάθος.

Η κατανόηση ποιες μεταβλητές φτάνουν στο πρόγραμμα περιήγησης, ότι τα δημόσια ενσωματώνονται κατά τη διάρκεια της κατασκευής και πού να αποθηκεύσετε τα μυστικά (gitignored `.env.local`) είναι απαραίτητη τόσο για τη λειτουργικότητα όσο και για την ασφάλεια.