FluentStack

Vercel Deployment

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

Vercel Deployment

Memahami alur dari GitHub repository ke Preview Deployment dan Production Deployment, lalu menyiapkan deployment pertama dengan pemeriksaan yang nyata.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Menjelaskan hubungan Git branch, Preview Deployment, dan Production Deployment
  • Memastikan app dapat dibuild sebelum dikirim ke hosting
  • Mengurutkan langkah import GitHub repository ke Vercel
  • Memeriksa URL deployment dan route utama setelah deploy
Next.jsVercelGitHubDeploymentProduction

Isi lesson

6 blok
  1. 1.
    Deploy adalah kelanjutan dari Git workflow, bukan tombol terakhirBelum selesaiWajib
  2. 2.
    Urutan minimum sebelum dan sesudah deployBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    Deployment berhasil bukan berarti feature sudah terverifikasiBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Deploy adalah kelanjutan dari Git workflow, bukan tombol terakhir

Wajib

Saat repository GitHub terhubung ke Vercel, push ke branch biasanya memicu deployment. Branch selain production branch menghasilkan Preview Deployment untuk memeriksa perubahan, sedangkan push atau merge ke production branch, umumnya main, menghasilkan Production Deployment. Dengan alur ini, URL preview dipakai untuk review sebelum perubahan menjadi versi utama yang dilihat user.

Sebelum import project, pastikan app lolos npm run build di mesin lokal. Build lokal tidak menjamin production pasti berhasil, tetapi ia menghilangkan kelas error dasar seperti import rusak, type error, atau script build yang belum siap. Saat import di Vercel, periksa repository, framework preset, root directory bila project berada di subfolder, build setting, dan environment variable yang diperlukan. Setelah deploy selesai, buka URL hasil deployment dan cek route yang paling penting, bukan hanya halaman beranda.

Bagian ini memengaruhi progres lesson.

Urutan minimum sebelum dan sesudah deploy

Wajib
bash
# Di repository lokal
npm run build
git status
git add .
git commit -m "Prepare production deployment"
git push origin main

# Di Vercel Dashboard
# New Project -> Import Git Repository -> pilih repository
# Periksa framework, root directory, dan environment variable
# Deploy -> buka deployment URL -> cek route utama

Contoh ini bukan perintah yang boleh dijalankan secara buta. npm run build perlu benar-benar selesai sebelum kamu menganggap project siap. Jika main adalah production branch project, push ke main dapat memicu Production Deployment setelah repository terhubung. Untuk perubahan yang belum siap rilis, gunakan branch feature agar review terjadi pada Preview Deployment terlebih dahulu.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Plan Vercel Git deployment

Lengkapi deployment map untuk alur feature branch menuju Preview dan merge ke main menuju Production.

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.

3 cek otomatis5 checklist
Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Setelah repository terhubung ke Vercel dengan main sebagai production branch, perubahan feature perlu direview terlebih dahulu. Ke branch mana perubahan paling tepat dipush?

Progres lesson naik setelah jawaban benar.

Catatan penting

Wajib

Deployment berhasil bukan berarti feature sudah terverifikasi

Status Ready hanya menyatakan build dan deployment selesai. Tetap buka deployment URL, cek route yang relevan, coba flow auth jika ada, dan pastikan data atau fallback yang diharapkan muncul. Gunakan Preview Deployment untuk review perubahan; jangan menjadikan production URL sebagai tempat pertama menemukan error yang seharusnya dapat ditangkap sebelum merge.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • Push ke branch dapat memicu deployment setelah repository terhubung ke Vercel.
  • Feature branch cocok untuk Preview Deployment, sedangkan main umumnya menjadi production branch.
  • Jalankan npm run build secara lokal sebelum mengirim perubahan ke deployment.
  • Setelah status Ready, cek URL dan route penting secara nyata.
  • Berikutnya, kamu akan memisahkan konfigurasi lokal, Preview, dan Production tanpa membocorkan credential.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Deploy adalah kelanjutan dari Git workflow, bukan tombol terakhir.

Memuat progresReview module