Next.js میں environment variables کیسے کام کرتے ہیں؟

Question

Accepted Answer

Next.js `.env` فائلوں سے environment variables کو لوڈ کرتا ہے، ایک اہم سیکیورٹی اصول کے ساتھ: متغیرات **ڈیفالٹ طور پر صرف سرور کے لیے** ہیں، اور صرف وہ متغیرات جو `NEXT_PUBLIC_` سے شروع ہوں براؤزر کے لیے expose ہوتے ہیں۔

## فائلیں

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

## اہم prefix اصول

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

یہ prefix اصول ایک **سیکیورٹی فیچر** ہے: یہ آپ کو ڈیٹا بیس کے passwords یا API secrets کو غیر ارادی طور پر کلائنٹ کو بھیجنے سے روکتا ہے۔ ایک non-prefixed متغیر براؤزر bundles میں بالکل موجود نہیں ہوتی۔

## NEXT_PUBLIC_ values کیسے embed ہوتی ہیں

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

کیونکہ یہ build time پر inline ہوتی ہیں، `NEXT_PUBLIC_` value میں تبدیلی کے لیے ایک **rebuild** کی ضرورت ہے — اور آپ کو کبھی true secrets کو اس prefix کے پیچھے نہیں رکھنا چاہیے (وہ bundle میں کسی کو بھی نظر آ سکتے ہیں)۔

## بہترین طریقے

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

## اہمیت

Server-only-by-default ماڈل `NEXT_PUBLIC_` opt-in کے ساتھ Next.js کا کلائنٹ کو secrets leak کرنے سے بچاؤ ہے — ایک عام، سنگین غلطی۔

یہ سمجھنا ضروری ہے کہ کون سے متغیرات براؤزر تک پہنچتے ہیں، کہ public متغیرات build-time پر inline ہوتی ہیں، اور secrets کو کہاں store کریں (gitignored `.env.local`) - یہ دونوں functionality اور سیکیورٹی کے لیے ضروری ہے۔