DEV Community

Cover image for Cara menggunakan Environment Variables di NextJS
Awan
Awan

Posted on

Cara menggunakan Environment Variables di NextJS

Pertama-tama buat lah sebuah file di root project dengan nama .env

MY_NAME=AWAN;
Enter fullscreen mode Exit fullscreen mode

Setelah itu kita bisa memanggil environment variable di codingan dengan cara

const name = process.env.MY_NAME;
console.log(name);
Enter fullscreen mode Exit fullscreen mode

Dan hasilnya akan keluar seperti ini

Hasil di terminal

Cara diatas hanya akan bisa diakses oleh V8 atau nodejs nya saja, ketika kita ingin akses variable tersebut di browser akan undefined seperti ini

Hasil di browser

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
Enter fullscreen mode Exit fullscreen mode

Cara memanggil environment variable di codingan sama aja seperti ini

const name_public = process.env.NEXT_PUBLIC_MY_NAME;
console.log(name_public);
Enter fullscreen mode Exit fullscreen mode

Dan hasilnya akan keluar seperti ini

ENV Public di terminal

Ketika dilihat di browser akan seperti ini

ENV Public di browser

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)

Collapse
 
korizki profile image
Rizki Ramadhan

Thank's bro 🤩