Cara menggunakan Environment Variables di NextJS

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