Next.js ਵਿੱਚ environment variables ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ?

Question

Accepted Answer

Next.js `.env` ਫਾਈਲਾਂ ਤੋਂ environment variables ਲੋਡ ਕਰਦਾ ਹੈ, ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਸੁਰੱਖਿਆ ਨਿਯਮ ਦੇ ਨਾਲ: ਵੇਰੀਏਬਲ **ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ ਸਰਵਰ-ਸਿਰਫ਼** ਹਨ, ਅਤੇ ਸਿਰਫ਼ `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`) ਕਾਰਜਕਾਰੀ ਅਤੇ ਸੁਰੱਖਿਆ ਦੋਵਾਂ ਲਈ ਜ਼ਰੂਰੀ ਹੈ।