FluentStack

Environment Setup

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 11: Production Next.jsAdvanced70 menitBahasa Indonesia

Environment Setup

Menempatkan nama environment variable pada scope Preview atau Production yang tepat, membedakan browser-safe configuration dari secret server-only, dan memahami kapan deployment perlu dibuat ulang.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Membedakan .env.local dari environment variable pada platform deployment
  • Memilih scope Preview dan Production sesuai kebutuhan app
  • Menjaga secret tetap server-only tanpa prefix NEXT_PUBLIC_
  • Menjelaskan mengapa perubahan environment variable memerlukan deployment baru
Next.jsVercelEnvironment VariablesSecuritySupabase

Isi lesson

6 blok
  1. 1.
    Nama variable boleh dibahas; nilainya tidak perlu dibagikanBelum selesaiWajib
  2. 2.
    Pisahkan browser-safe config dari secret server-onlyBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    Preview bukan tempat aman untuk semua production credentialBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Nama variable boleh dibahas; nilainya tidak perlu dibagikan

Wajib

.env.local membantu project lokal membaca configuration tanpa memasukkan nilai ke source control. Saat app dideploy, Vercel tidak membaca file lokalmu. Tambahkan nama dan nilai variable melalui Project Settings, lalu pilih environment yang memang membutuhkan variable tersebut, misalnya Preview, Production, atau keduanya. Gunakan nilai test untuk Preview bila service yang dipakai mendukungnya; jangan tanpa sengaja mengarahkan branch eksperimen ke data production.

Prefix NEXT_PUBLIC_ membuat nilai tersedia pada browser bundle. Ini cocok untuk configuration publik seperti NEXT_PUBLIC_SUPABASE_URL atau publishable key yang memang didesain untuk browser bersama RLS. Service role key, session secret, API secret, dan password database harus tetap server-only tanpa prefix tersebut. Saat variable berubah di Vercel, deployment yang sudah ada tidak menerima perubahan itu secara retroaktif. Buat deployment baru, lalu verifikasi URL yang tepat agar app benar-benar memakai configuration baru.

Bagian ini memengaruhi progres lesson.

Pisahkan browser-safe config dari secret server-only

Wajib
ts
// Aman tersedia di browser bila memang diperlukan oleh client
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabasePublishableKey =
  process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY;

// Hanya dipakai pada server. Jangan beri prefix NEXT_PUBLIC_.
const serviceRoleKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
const sessionSecret = process.env.SESSION_SECRET;

// Jangan commit nilai production ke .env.local atau source code.
// Di Vercel, pilih scope Preview dan/atau Production lalu redeploy.

Yang penting pada contoh ini adalah boundary, bukan nilai variablenya. Browser-safe tidak berarti memberi akses tanpa batas: Supabase tetap membutuhkan RLS policy. Sebaliknya, satu secret yang diawali NEXT_PUBLIC_ akan ikut dibundel untuk browser dan harus dianggap bocor. Variable baru atau perubahan value berlaku untuk deployment berikutnya, sehingga redeploy adalah bagian dari perubahan configuration.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Classify production environment values

Lengkapi configuration map yang membedakan browser-safe value, secret server-only, dan scope deployment tanpa menulis nilai credential.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

4 cek otomatis5 checklist
Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Kamu memperbarui SESSION_SECRET pada Project Settings Vercel. Apa langkah berikutnya agar Production Deployment memakai nilai baru?

Progres lesson naik setelah jawaban benar.

Peringatan

Wajib

Preview bukan tempat aman untuk semua production credential

Preview Deployment adalah environment deploy yang terpisah, bukan sekadar localhost dengan URL lain. Tentukan data dan provider mana yang boleh disentuh preview. Untuk auth, pastikan callback URL yang digunakan memang sesuai environment. Untuk data, gunakan test project atau batasi operation bila tersedia. Jangan memakai production secret pada setiap branch hanya karena setup paling cepat.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • .env.local hanya untuk local workflow; deployment memakai configuration platformnya sendiri.
  • Pilih scope Preview dan Production secara sengaja untuk setiap variable.
  • NEXT_PUBLIC_ hanya untuk nilai yang memang boleh masuk browser bundle.
  • Secret server-only tidak boleh di-commit atau diberikan prefix public.
  • Perubahan variable memerlukan deployment baru sebelum dapat diverifikasi.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Nama variable boleh dibahas; nilainya tidak perlu dibagikan.

Memuat progresReview module