Pertama-tama buat lah sebuah file di root project dengan nama .env
MY_NAME=AWAN;
Setelah itu kita bisa memanggil environment variable di codingan dengan cara
const name = process.env.MY_NAME;
console.log(name);
Dan hasilnya akan keluar seperti ini
Cara diatas hanya akan bisa diakses oleh V8 atau nodejs nya saja, ketika kita ingin akses variable tersebut di browser akan undefined seperti ini
Oleh karna itu, ada cara lain dalam mendefine environment variable yang dibutuhkan supaya browser juga bisa membacanya dengan cara menambahkan NEXT_PUBLIC_ atau seperti ini
NEXT_PUBLIC_MY_NAME=AWAN PUBLIC
Cara memanggil environment variable di codingan sama aja seperti ini
const name_public = process.env.NEXT_PUBLIC_MY_NAME;
console.log(name_public);
Dan hasilnya akan keluar seperti ini
Ketika dilihat di browser akan seperti ini
Dalam penggunaan environment variables terkadang ada data private yang browser tidak boleh tau sehingga kita bisa menggunakan metode pertama dalam define variable dan ada kalanya kita butuh data yang browser harus tau dengan cara metode 2.
Untuk contoh projectnya saya sudah upload di github: https://github.com/awanz/nextjs-env
Top comments (1)
Thank's bro 🤩