FluentStack

Environment Variables

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 10: Next.js App RouterAdvanced60 menitBahasa Indonesia

Environment Variables

Menyimpan konfigurasi lokal di .env.local serta membedakan value server-only dari value browser yang memakai prefix NEXT_PUBLIC_.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Menjelaskan peran .env.local untuk konfigurasi lokal
  • Membedakan environment variable server-only dan NEXT_PUBLIC_
  • Menghindari commit secret ke repository
Next.jsEnvironment VariablesSecurity BasicsConfiguration

Isi lesson

6 blok
  1. 1.
    Simpan konfigurasi, bukan rahasia di source codeBelum selesaiWajib
  2. 2.
    Pisahkan value private dan publicBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    NEXT_PUBLIC_ berarti value dapat dilihat di browserBelum selesaiWajib
  5. 5.
    Cek pemahamanBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Simpan konfigurasi, bukan rahasia di source code

Wajib

Environment variables membantu project membaca value yang berbeda tanpa menulisnya langsung di source code. Untuk pengembangan lokal, .env.local adalah tempat yang umum untuk value tersebut dan seharusnya tidak masuk Git. Letakkan file ini di root project, bukan di dalam src.

Secara default, environment variable hanya tersedia di server. Prefix NEXT_PUBLIC_ membuat value tersedia ke browser dan nilainya dibundel saat build. Karena itu, prefix tersebut bukan cara menyimpan secret. Gunakan hanya untuk value yang memang aman dilihat user, misalnya nama aplikasi atau public analytics identifier yang memang dirancang untuk diekspos.

Bagian ini memengaruhi progres lesson.

Pisahkan value private dan public

Wajib
bash
# .env.local
COURSE_CATALOG_TOKEN=replace-with-local-value
NEXT_PUBLIC_APP_NAME=FluentStack

# app/api/course-summary/route.ts
const token = process.env.COURSE_CATALOG_TOKEN;

# app/ui/app-name.tsx
const appName = process.env.NEXT_PUBLIC_APP_NAME ?? "FluentStack";

COURSE_CATALOG_TOKEN hanya dibaca pada sisi server dan tidak boleh dikirim ke browser. NEXT_PUBLIC_APP_NAME boleh dipakai pada UI browser karena bukan secret. Walaupun sebuah value public, file .env.local tetap tidak perlu di-commit; gunakan contoh file terpisah bila tim perlu mengetahui nama variable yang harus diisi.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Classify Next environment values

Lengkapi env map untuk membedakan token server-only dari nama aplikasi public serta memastikan .env.local tidak masuk commit.

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.

5 cek otomatis5 checklist
Belum selesaiBuka practice

Peringatan

Wajib

NEXT_PUBLIC_ berarti value dapat dilihat di browser

Jangan memberi prefix NEXT_PUBLIC_ pada token, private key, password, service role key, atau value yang hanya boleh hidup di server. Prefix itu membuat nilai tersedia dalam JavaScript browser pada build. Jika ragu apakah value boleh dibuka user, perlakukan value tersebut sebagai private sampai kamu memahami kebutuhan integrasinya.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Variable mana yang aman dijadikan NEXT_PUBLIC_ pada contoh awal ini?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib
  • .env.local menyimpan konfigurasi lokal dan tidak boleh di-commit.
  • Variable tanpa NEXT_PUBLIC_ hanya tersedia di server secara default.
  • NEXT_PUBLIC_ hanya untuk value yang memang aman terlihat di browser, bukan secret.
  • Berikutnya, Uji Kompetensi akan menggabungkan loading, error, route handler, metadata, dan env pada satu route plan kecil.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Simpan konfigurasi, bukan rahasia di source code.

Memuat progresReview module