Si funksionojnë ndryshoret e mjedisit në Next.js?

Question

Accepted Answer

Next.js ngarkon ndryshoret e mjedisit nga skedarët `.env`, me një rregull të rëndësishëm sigurie: ndryshoret janë **vetëm për serverin si parazgjedhje**, dhe vetëm ato me parashtesën `NEXT_PUBLIC_` ekspozohen në shfletues.

## Skedarët

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

## Rregulli i parashtesës kritike

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

Ky rregull i parashtesës është një **veçori sigurie**: ju parandalon nga dërgimi aksidental i fjalëkalimeve të bazës së të dhënave ose i sekreteve API në klient. Një ndryshore pa parashtesë thjesht nuk ekziston në paketat e shfletuesit.

## Si integrohen vlerat NEXT_PUBLIC_

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

Sepse ato integrohen në kohën e ndërtimit, ndryshimi i një vlere `NEXT_PUBLIC_` kërkon një **rindërtim** — dhe nuk duhet të vendosni kurrë sekretet e vërteta pas parashtesës (do të ishin të dukshme në paket për të gjithë).

## Praktikat më të mira

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

## Pse është e rëndësishme

Modeli vetëm-për-serverin me pranimin `NEXT_PUBLIC_` është pengesa e Next.js kundër rrjedhjes së sekreteve në klient — një gabim i zakonshëm dhe serioz.

Kuptuarit se cilat ndryshorë arrijin në shfletues, që vlerat publike janë të integruara në kohën e ndërtimit, dhe se ku të ruani sekretet (`.env.local` i ignoruar) është thelbësor për funksionalitetin dhe sigurinë.