Kepiye cara kerja variabel lingkungan ing Next.js?

Question

Accepted Answer

Next.js ngemot variabel lingkungan saka file `.env`, kanthi peraturan keamanan sing penting: variabel-variabelku **mung server lan default**, lan mung sing duwe awalan `NEXT_PUBLIC_` sing kaekspos menyang browser.

## File-file

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

## Peraturan awalan kritis

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

Peraturan awalan iki minangka **fitur keamanan**: iku nyegah sampeyan saka ntumbas-ntumbas kanthi ora sengaja password basis data utawa rahasia API menyang klien. Variabel tanpa awalan mung ora ana ing bundle browser.

## Kepiye nilai NEXT_PUBLIC_ dibusak

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

Karena diinline nalika build time, ngganti nilai `NEXT_PUBLIC_` mbutuhake **rebuild** — lan sampeyan ora kudu nanduri rahasia sejati ing mburine awalan (bakal katon ing bundle menyang sapa wae).

## Praktik paling apik

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

## Apa sing penting

Model server-only-kanthi-default kanthi pilihan opt-in `NEXT_PUBLIC_` minangka penghalang Next.js marang pembocoran rahasia menyang klien — kesalahan umum sing serius.

Ngerti variabel mana kang tekan browser, apa variabel umum diinline ing build time, lan ngendi carane nyimpen rahasia (`.env.local` sing ora kena git) butuh kanggo kahanan lan keamanan.