# 🔐 Memahami Environment Variable di Next.js (Dev vs Production)

## Pendahuluan

Saat pertama kali deploy aplikasi **Next.js**, banyak developer mengalami masalah seperti:

* data tidak muncul
    
* API gagal di-fetch
    
* auth error padahal di local aman
    

Penyebabnya sering kali **bukan bug di kode**, tapi **Environment Variable (ENV)** yang salah konfigurasi.

Di artikel ini, kita bahas **cara kerja ENV di Next.js** secara praktis dan mudah dipahami.

---

## Apa Itu Environment Variable?

Environment Variable adalah **nilai konfigurasi** yang:

* tidak ditulis langsung di kode
    
* bisa berbeda antara **development** dan **production**
    
* biasanya berisi URL, token, atau secret
    

Contoh:

```plaintext
API_URL=https://api.example.com
```

---

## File ENV yang Dibaca Next.js

Next.js **TIDAK membaca semua file** `.env` secara sembarangan.

Urutan prioritasnya:

1. `.env.local` ✅
    
2. `.env.development`
    
3. `.env.production`
    
4. `.env`
    

📌 `.env.example` hanya template, tidak pernah dibaca.

---

## Kenapa `.env.local` Direkomendasikan?

Karena:

* otomatis dibaca Next.js
    
* tidak ikut ke-commit (aman)
    
* bisa beda di tiap server
    

Contoh membuatnya:

```plaintext
cp .env.example .env.local
```

---

## Perbedaan ENV Server & Client

Ini bagian **paling sering bikin error**.

### ❌ ENV tanpa `NEXT_PUBLIC_`

```plaintext
API_SECRET=xxxxx
```

❌ Tidak bisa dipakai di browser

### ✅ ENV dengan `NEXT_PUBLIC_`

```plaintext
NEXT_PUBLIC_SITE_URL=http://localhost:8080
```

✅ Bisa dipakai di client & browser

📌 Gunakan `NEXT_PUBLIC_` **HANYA untuk data yang aman dipublikasikan**.

---

## Contoh Kasus Nyata (Port Salah)

Misalnya aplikasi kamu jalan di port **8080**, tapi kodenya:

```plaintext
baseURL: process.env.BETTER_AUTH_URL || "http://localhost:3000"
```

Jika `BETTER_AUTH_URL` tidak diset:  
👉 request akan lari ke **port 3000 (mati)**  
👉 hasilnya: **Failed to fetch**

### Solusi:

```plaintext
BETTER_AUTH_URL=http://localhost:8080
```

---

## Perlu Build Ulang atau Tidak?

✅ **YA**, kalau:

* ubah `.env.local`
    
* deploy production
    
* pakai `pm2 start npm -- start`
    

❌ Tidak perlu build ulang kalau:

* cuma ubah UI
    
* pakai `npm run dev`
    

---

## Workflow ENV yang Benar (Production)

```plaintext
cp .env.example .env.local
nano .env.local
npm run build
pm2 restart next-portfolio
```

---

## Kesalahan Umum

* ❌ mengandalkan `.env.example`
    
* ❌ lupa restart PM2
    
* ❌ pakai [`localhost:3000`](http://localhost:3000) di server
    
* ❌ lupa prefix `NEXT_PUBLIC_`
    

---

## Penutup

Memahami **ENV di Next.js** akan menghemat:

* waktu debugging
    
* error aneh di production
    
* deploy gagal tanpa pesan jelas
    

Kalau deploy kamu sering bermasalah, **cek ENV dulu sebelum cek kode**.