Hogyan működnek a környezeti változók a Next.js-ben?

Question

Accepted Answer

A Next.js a `.env` fájlokból tölti be a környezeti változókat, fontos biztonsági szabály mellett: a változók **alapértelmezés szerint csak szerver-oldalinak** tekintendők, és csak az `NEXT_PUBLIC_` előtaggal ellátottak vannak kitéve a böngészőnek.

## A fájlok

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

## A kritikus előtag szabály

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

Ez az előtag szabály egy **biztonsági funkció**: megakadályozza, hogy véletlenül adatbázis jelszavakat vagy API titkokat küldj az ügyfélnek. Az előtag nélküli változó egyszerűen nem létezik a böngésző csomagjaiban.

## Hogyan ágyazódnak be a NEXT_PUBLIC_ értékek

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

Mivel az építési időben vannak beágyazva, egy `NEXT_PUBLIC_` érték módosítása **újraépítést** igényel — és soha nem szabad igazi titkokat az előtag mögé tenni (azok láthatóak lennének a csomagban mindenkinek).

## Legjobb gyakorlatok

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

## Miért fontos

Az alapértelmezés szerinti csak-szerver oldali modell az `NEXT_PUBLIC_` opt-in lehetőséggel a Next.js védelme a titkoknak az ügyfélhez való szivárgása ellen — egy gyakori, súlyos hiba.

Az megértése, hogy mely változók érik el a böngészőt, hogy a nyilvános értékek az építési időben vannak beágyazva, és hogy hol kell tárolni a titkokat (gitignored `.env.local`) a funkcionalitás és a biztonság szempontjából is alapvető.