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 இன் வாடிக்கையாளரிடம் ரகசியங்களை கசிவதற்கு எதிரான பாதுகாப்பு — ஒரு பொதுவான, கடுமையான பிழை.

अ எந்த மாறிகள் உலாவியை அடையும், பொது மதிப்புகள் கட்டுமான-நேர உட்பொதிப்பு, மற்றும் ரகசியங்களை எங்கு சேமிக்க வேண்டும் (புறக்கணித்த `.env.local`) இந்த தகவல்களைப் புரிந்துகொள்வது செயல்பாடு மற்றும் பாதுகாப்புக்கு அপরिহार्य।