🔐 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:

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:

cp .env.example .env.local

---

Perbedaan ENV Server & Client

Ini bagian paling sering bikin error.

❌ ENV tanpa NEXT_PUBLIC_

API_SECRET=xxxxx

❌ Tidak bisa dipakai di browser

✅ ENV dengan NEXT_PUBLIC_

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:

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:

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)

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