Yaya environment variables ke aiki a cikin Next.js?

Question

Accepted Answer

Next.js yana jefa environment variables daga `.env` fayilai, tare da mahimman ƙa'idar amni: masu canji **server-only da tsoho-tsoho**, kuma kawai waɗanda aka hakaka tare da `NEXT_PUBLIC_` ne ke bayyana ga browser.

## Fayilai

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

## Ƙa'idar mahimmar hakaki

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

Acin ƙa'idar hakaki wannan **fasalin amni** ne: yana hana ka daga halatar aikawa kalmar serewa ta basu bayanai ko sirran API ga client. Masu canji marasa hakaki ba sa wanzuwa a cikin kulle-kulle na browser.

## Yaya ƙimomi NEXT_PUBLIC_ ke shiga

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

Domin an damje su a lokacin gini, canja ƙimar `NEXT_PUBLIC_` yana bukaci **sake gini** — kuma ba ya kamata ka ajiye sirrai na gaskiya a bayan hakaki (za su kasance a bayyana a cikin kulle ga kowa).

## Aiki mafi kyau

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

## Me yasa yana da mahimmanci

Server-only-da-tsoho-tsoho samfurin tare da `NEXT_PUBLIC_` zaɓi shine gida na Next.js jiya sirra ga client — kuskure na gida, mai tsanani.

Sanin wane masu canji ke kai ga browser, cewa jama'a na jama'a an damje su a lokacin gini, kuma ina ake adana sirra (gitignored `.env.local`) yana da mahimmanci don aiki da amni.