Jangan Sampai Bocor! Cara Aman Kelola File .env di Next.js Biar Nggak Menyesal

Coba bayangkan skenario horor ini: Kamu lagi asyik ngoding web sampai larut malam, merasa bangga dengan fitur baru yang udah selesai, lalu dengan semangat kamu ketik git push ke repositori GitHub publik. Besok paginya, kamu kaget lihat tagihan server membengkak atau parahnya, data Learning Management System (LMS) kamu hilang dihapus peretas.

Kenapa bisa gitu? Sederhana banget: kamu nggak sengaja ikut mengunggah file .env yang isinya password database asli kamu ke internet. Percaya deh, bot-bot hacker di GitHub itu cuma butuh hitungan detik buat nemuin password yang nyasar!

Melanjutkan obrolan kita di Panduan Utama Inisialisasi Next.js dan Prisma (Part 1), kali ini kita bakal ngobrol santai tapi serius soal gimana sih cara yang bener dan aman buat ngelola file .env (Environment Variables).

1. Kenapa File .env Itu Ibarat Brankas Nyawa Aplikasi?

File .env itu bukan sembarang file teks. Di sinilah kita nyimpen semua "kunci rahasia" web kita. Mulai dari URL koneksi ke database Prisma (DATABASE_URL), kunci rahasia buat NextAuth (NEXTAUTH_SECRET), sampai API Key buat layanan pihak ketiga (misal: API key buat ngirim email atau payment gateway).

Karena isinya barang-barang super sensitif, file ini HARUS DAN WAJIB cuma ada di komputer lokal kamu aja. Nggak boleh mampir ke Git, apalagi ke repositori publik.

2. Jurus Ampuh .gitignore: Benteng Pertahanan Pertama

Biar file .env nggak ikut kebawa pas kamu commit kode ke Git, Next.js sebenarnya udah nyiapin perlindungan otomatis lewat file bernama .gitignore. Tapi, buat jaga-jaga, pastiin kamu ngecek file .gitignore di folder paling luar proyekmu, dan pastikan baris-baris ini ada:

# Kumpulan file environment yang dilarang keras masuk Git
.env
.env*.local
.env.development
.env.production

Tips Pro: Biasakan pakai nama file .env.local buat nyimpen variabel lokal kamu. Next.js secara otomatis bakal ngebaca file ini kok, dan file ini udah pasti masuk daftar hitam (blacklist) si Git.

3. Awas Jebakan NEXT_PUBLIC_!

Nah, ini nih jebakan betmen yang paling sering bikin developer pemula kepleset. Di Next.js, semua variabel di dalam file .env itu sifatnya hanya bisa dibaca oleh Server secara default. Artinya, aman!

Tapi, kadang kita butuh ngasih tahu data tertentu ke browser pengunjung (misalnya ID Google Analytics). Next.js ngasih fitur buat ngebuka variabel ke browser dengan cara nambahin awalan NEXT_PUBLIC_ di nama variabelnya.

# AMAN: Cuma server yang tahu password ini
DATABASE_URL="mysql://root:password_rahasia@localhost:3306/db_sekolah"

# BAHAYA KALAU SALAH PAKAI: Variabel ini bakal dikirim mentah-mentah ke browser pengunjung!
NEXT_PUBLIC_API_KEY="jangan_pernah_taruh_password_di_sini"

Jadi, pastikan kamu nggak pernah iseng-iseng nambahin NEXT_PUBLIC_ buat URL database, Secret Key, atau token penting lainnya. Kalau kamu lakuin itu, rahasiamu bakal telanjang bulat dan bisa dibaca lewat Inspect Element di browser siapa aja.

4. Terus, Gimana Cara Setting di Server Produksi (Hosting)?

"Mas, kalau file .env nggak di-upload ke GitHub, terus gimana caranya web kita di server produksi bisa konek ke database?"

Pertanyaan bagus! Jawabannya: kita masukin rahasianya langsung lewat dashboard penyedia hosting kamu (kayak Vercel, VPS, atau cPanel). Di sana biasanya ada menu bernama Environment Variables. Kamu tinggal copy-paste URL database produksi kamu di sana. Dengan cara ini, server tahu rahasianya, tapi kodenya tetep bersih dari jejak password.

Kesimpulan

Keamanan sebuah web itu bukan cuma urusan nangkis hacker dari luar, tapi juga soal kedisiplinan kita sendiri dalam nulis dan ngelola kode (Secure Coding). Sedisiplin apa pun kamu, kelalaian kecil kayak bocornya file .env bisa ngeruntuhin semua pertahanan yang udah dibangun capek-capek.

Kalau urusan beres-beres file rahasia ini udah kamu kuasai, yuk kita review lagi langkah-langkah bikin arsitektur web yang kebal dari berbagai serangan bareng Next.js dan Prisma di Jurnal Part 1 kita! Jangan biarkan mimpimu ngebangun sistem canggih hancur gara-gara hal sepele.

Share this post