ตัวแปรสภาพแวดล้อมทำงานอย่างไรใน 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 ไปยังไคลเอนต์โดยไม่ตั้งใจ ตัวแปรที่ไม่มีคำนำหน้าจะไม่มีอยู่ในบันเดิล browser

## วิธีการฝัง NEXT_PUBLIC_ values

```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`) เป็นสิ่งจำเป็นสำหรับการทำงานและความปลอดภัย