Advanced · Level 11: Production Next.jsAdvanced75 menitBahasa Indonesia

Deployment Debugging

Menggunakan flow debugging production yang memisahkan build failure, configuration issue, runtime failure, auth callback issue, dan data freshness problem.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menyusun langkah diagnosis dari symptom ke bukti dan next action
Membedakan build, environment, runtime, auth callback, dan cache issue
Mengurangi perubahan acak saat deployment bermasalah
Menulis catatan deployment yang dapat dipakai rekan developer

Next.jsVercelDebuggingAuthenticationProduction

Isi lesson

6 blok

1.
Mulai dari symptom yang dapat diulang, bukan dari solusi favoritBelum selesaiWajib
2.
Catatan investigasi yang kecil tetapi dapat ditindaklanjutiBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Production note adalah alat debugging, bukan laporan panjangBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Mulai dari symptom yang dapat diulang, bukan dari solusi favorit

Wajib

Deployment debugging menjadi jauh lebih tenang bila kamu memisahkan lima pertanyaan. Pertama, apakah build selesai atau gagal? Kedua, deployment mana dan commit mana yang sedang dibuka? Ketiga, apakah environment variable ada pada scope yang benar? Keempat, apakah error muncul ketika route menerima request dan dapat dibuktikan melalui runtime log? Kelima, untuk auth dan data, apakah callback URL, identity, RLS, atau freshness data sesuai dengan environment tersebut?

Pilih satu symptom yang dapat diulang, misalnya /dashboard memberi 500 pada Production tetapi bekerja lokal. Catat URL, waktu, user state, dan commit. Periksa build status lalu log yang sesuai. Jika ada variable yang baru ditambahkan, cek nama, scope, dan apakah deployment dibuat ulang. Jika auth redirect gagal, cek callback URL yang terdaftar pada provider dan aplikasi. Setelah membuat satu perubahan, redeploy atau ulangi request, lalu catat hasilnya. Flow ini menghasilkan bukti yang dapat dibagikan kepada tim, bukan rangkaian perubahan spekulatif.

Bagian ini memengaruhi progres lesson.

Catatan investigasi yang kecil tetapi dapat ditindaklanjuti

Wajib

type DeploymentInvestigation = {
  symptom: string;
  evidence: string;
  nextAction: string;
};

export const investigation: DeploymentInvestigation[] = [
  {
    symptom: "Deployment stopped during build",
    evidence: "Build log: Module not found: @/lib/profile-service",
    nextAction: "Fix the import path, run npm run build locally, then redeploy.",
  },
  {
    symptom: "Production dashboard returns 500",
    evidence: "Runtime log: Missing NEXT_PUBLIC_SUPABASE_URL",
    nextAction: "Add the variable to Production, redeploy, then retest /dashboard.",
  },
];

Struktur ini memisahkan apa yang terlihat, bukti yang sudah ada, dan langkah berikutnya. Ia tidak menganggap semua 500 berasal dari kode yang sama. Dalam situasi nyata, simpan link deployment atau timestamp jika tooling tim mendukungnya, lalu tulis perubahan yang benar-benar dilakukan. Jangan memasukkan secret ke ticket, commit message, atau screenshot log.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Plan deployment debugging response

Lengkapi investigation plan untuk masalah build, environment, dan auth callback tanpa menebak atau mencatat 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

Login berhasil pada localhost tetapi setelah login user kembali ke URL yang salah di Production. Bukti dan setting mana yang paling relevan diperiksa lebih dulu?

Progres lesson naik setelah jawaban benar.

Tips

Wajib

Production note adalah alat debugging, bukan laporan panjang

Setelah deploy, tulis satu catatan ringkas: commit atau perubahan yang dirilis, URL yang dicek, route atau flow yang diuji, variable baru menurut namanya saja, dan risiko atau follow-up yang tersisa. Format ini membuat review lebih mudah dan memberi baseline ketika error muncul setelah rilis. Hindari menulis nilai secret, token, atau data user pada catatan tersebut.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Debugging deployment dimulai dari symptom yang dapat diulang dan deployment yang tepat.
Pisahkan build failure, configuration issue, runtime error, auth callback, dan freshness data.
Gunakan log sebagai bukti, lalu lakukan satu perubahan kecil yang dapat diuji.
Redeploy atau ulangi request setelah configuration berubah.
Berikutnya, Uji Kompetensi memeriksa apakah kamu siap membawa Local Next.js App ke production dengan flow yang aman.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Mulai dari symptom yang dapat diulang, bukan dari solusi favorit.

Memuat progres Review module