Environment Variable: Menyimpan Rahasia

Kenapa tidak hardcode?

API key, URL database, dan secret lain tidak boleh ditulis langsung di kode. Selain tidak aman (bisa bocor ke Git), nilainya beda antara development, staging, dan production. Environment variable menyelesaikan keduanya.

File .env.local

Buat file .env.local di root project:

File ini otomatis dibaca Next.js. Jangan pernah commit .env.local ke Git. Pastikan ada di .gitignore (create-next-app sudah menambahkannya).

Membaca di kode

// Hanya bisa diakses di server (Server Component, Server Action, Route Handler)
const dbUrl = process.env.DATABASE_URL;

// Bisa diakses di browser HANYA kalau diawali NEXT_PUBLIC_
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL;

Aturannya keras: variabel tanpa prefix NEXT_PUBLIC_ tidak akan pernah dikirim ke browser. Ini fitur keamanan, bukan bug.

Validasi env

Typo di nama variabel bikin undefined diam-diam. Validasi dengan Zod saat aplikasi start:

// lib/env.ts
import { z } from "zod";

const skema = z.object({
  DATABASE_URL: z.string().url(),
  API_SECRET: z.string().min(16),
});

export const env = skema.parse(process.env);

Import @/lib/env di awal dan aplikasi akan langsung error dengan pesan jelas kalau ada env yang hilang.

Kesalahan umum pemula

• Commit .env.local ke Git. Secret yang ter-commit dianggap bocor. Selalu cek .gitignore sebelum commit pertama.
• Pakai NEXT_PUBLIC_ untuk secret. Prefix ini berarti "kirim ke browser". API key rahasia tidak boleh pakai prefix ini.
• Mengubah env di production tanpa redeploy. Nilai NEXT_PUBLIC_* disuntikkan saat build. Ubah nilainya = build ulang.

Latihan singkat

1. Buat .env.local dengan NAMA_SITUS (public) dan API_SECRET (server saja). Tampilkan yang public di halaman, pastikan secret tidak bisa diakses dari browser.
2. Buat lib/env.ts dengan validasi Zod dan import di layout. Coba hapus satu variabel dan lihat error-nya yang jelas.

Rangkuman

• Simpan secret di .env.local yang tidak di-commit ke Git.
• Variabel tanpa prefix hanya bisa diakses di server; NEXT_PUBLIC_* terekspos ke browser.
• Validasi env dengan Zod agar typo terdeteksi sejak awal dengan pesan jelas.
• Nilai NEXT_PUBLIC_* disuntikkan saat build, jadi butuh rebuild kalau diubah.

Catatan teknis: Nilai NEXT_PUBLIC_* disuntikkan saat build, bukan saat runtime. Kalau kamu mengubahnya di server production, kamu harus build ulang. Untuk nilai yang berubah tanpa build ulang, baca dari server saat request (misal lewat Server Component).