🔐 Memahami Environment Variable di Next.js (Dev vs Production)
Command Palette
Search for a command to run...
Comments
Join the discussionNo comments yet. Be the first to comment.
Search for a command to run...
No comments yet. Be the first to comment.
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.
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
Next.js TIDAK membaca semua file .env secara sembarangan.
Urutan prioritasnya:
.env.local ✅
.env.development
.env.production
.env
📌 .env.example hanya template, tidak pernah dibaca.
.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
Ini bagian paling sering bikin error.
NEXT_PUBLIC_API_SECRET=xxxxx
❌ Tidak bisa dipakai di browser
NEXT_PUBLIC_NEXT_PUBLIC_SITE_URL=http://localhost:8080
✅ Bisa dipakai di client & browser
📌 Gunakan NEXT_PUBLIC_ HANYA untuk data yang aman dipublikasikan.
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
BETTER_AUTH_URL=http://localhost:8080
✅ YA, kalau:
ubah .env.local
deploy production
pakai pm2 start npm -- start
❌ Tidak perlu build ulang kalau:
cuma ubah UI
pakai npm run dev
cp .env.example .env.local
nano .env.local
npm run build
pm2 restart next-portfolio
❌ mengandalkan .env.example
❌ lupa restart PM2
❌ pakai localhost:3000 di server
❌ lupa prefix NEXT_PUBLIC_
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.