Cara Menambahkan Environment Variables di Vercel

Halo gais! Bagi kalian yang mempunyai Project Aplikasi Web yang dihosting dengan menggunakan Vercel, tentunya kalian perlu yang namanya Setup Konfigurasi seperti di bagian Environment Variabel, terutama jika menggunakan Tech Stack seperti Next.js atau yang lainnya. Kali ini kita akan memberikan Tutorial Singkat Cara Menambahkan Environment Variables di Vercel.

Sumber : Vercel.com (Guide), Vercel.com (Academy), Delasign.com (Blog), dan Tutorialspoint.com

Anda dapat menambahkan environment variable ke sebuah proyek di Vercel melalui Dashboard Vercel, Vercel CLI, maupun REST API. Apa pun metode yang digunakan, perubahan tersebut tidak langsung diterapkan pada deployment yang sedang aktif. Nilai environment variable baru akan digunakan pada deployment berikutnya.

Setelah menambahkan sebuah variabel, Anda dapat menentukan cakupan penggunaannya, misalnya untuk Production, Preview, Development, atau environment khusus yang dibuat sendiri. Nilai yang sama juga dapat diambil ke lingkungan pengembangan lokal sehingga setiap environment dapat menggunakan konfigurasi yang konsisten.

Panduan ini membahas berbagai metode untuk menambahkan environment variable, cara kerja scoping environment, serta beberapa perilaku dan kondisi yang paling sering menyebabkan masalah atau bug pada penggunaan environment variable di Vercel.

Pertama, bukalah Dashboard All Projects di Vercel dan pililah pada salah satu Project Anda.

Kemudian, pilihlah pada menu Settings pada salah satu Proyek kalian.

Kemudian, pergilah dan klik pada bagian "Environments".

Setelah itu, pilihlah pada bagian "Production".

Jika sudah, pilihlah lagi Tombol "Add Environment Variables".

Masukkanlah pada salah satu Variabel seperti Key, Value, hingga Sensitive (Biasanya dipilih jika berbentuk API Key atau Project ID). Setelah itu klik "Save".

Jika sudah, maka akan seperti ini tampilannya. Anda juga bisa menambahkan Variabel lainnya sesuai dengan kebutuhan akan Framework yang kalian pakai.

Jika kalian menggunakan Next.js dalam Proyek Anda, inilah Panduannya (Contohnya, Project API Blogger Aggregator) :

• BLOGGER_API_KEY : API Key Anda
• BLOGGER_BLOG_IDS : ID Blog Anda
• NEXT_PUBLIC_SITE_URL : https://nama-website-anda.vercel.app

Contohnya :

• BLOGGER_API_KEY : API Key Anda
• BLOGGER_BLOG_IDS : 8444673175xxxxxxxxx,2490536221xxxxxxxxx,8377455155xxxxxxxxx
• NEXT_PUBLIC_SITE_URL : https://nama-website-anda.vercel.app

Terakhir jika sudah selesai semua, langsung klik saja "Redeploy" yang muncul pada bagian Pojok Bawah Kanan (Pada Popup yang berwarna Biru).

Mohon maaf apabila ada kesalahan sedikit pun pada Tutorial ini.

Terima Kasih 😀😊😘👌👍 :)