Study
Next.js

Environment Variables

Penjelasan

Environment variable disimpan di file .env.local (otomatis di-gitignore, tidak boleh di-commit). Secara default, variabel HANYA bisa diakses di server (Server Component, Route Handler) — untuk variabel yang memang perlu diakses juga dari Client Component/browser, namanya WAJIB diawali prefix NEXT_PUBLIC_.

Contoh Konsep

# .env.local
DATABASE_URL=postgres://user:pass@localhost/db
API_SECRET_KEY=rahasia-jangan-bocor
NEXT_PUBLIC_API_URL=https://api.compiledaily.net

// Dipakai di Server Component (SEMUA variabel bisa diakses):
// const dbUrl = process.env.DATABASE_URL;

// Dipakai di Client Component (HANYA yang berprefix NEXT_PUBLIC_):
// const apiUrl = process.env.NEXT_PUBLIC_API_URL;

Praktikum

Tulis isi file .env.local dengan variabel MAIL_PASSWORD (rahasia, cuma server) dan NEXT_PUBLIC_SITE_NAME (boleh diakses browser). Tulis juga contoh cara mengaksesnya masing-masing di Server Component dan Client Component.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

JANGAN PERNAH menambahkan prefix NEXT_PUBLIC_ pada variabel yang berisi rahasia (API key, password database, dst) — begitu diawali NEXT_PUBLIC_, nilainya di-BUNDLE ke JavaScript yang dikirim ke browser dan bisa dilihat siapa saja lewat DevTools, TIDAK ada cara membatalkannya setelah ter-bundle.