Saatnya Go Live! Pelajari cara mempublikasikan blog Next.js-mu ke seluruh dunia. Panduan langkah demi langkah deploy ke Vercel, dari push ke GitHub hingga mendapatkan URL live.
600m bacaanKuis WajibMicro Badge Lesson
Bab 6: Go Live! Mempublikasikan Blog-mu ke Dunia
Selamat datang di garis finis! Kamu telah bekerja keras membangun blog yang fungsional, cepat, dan indah. Sekarang adalah saat yang paling memuaskan: membagikannya dengan seluruh dunia.
Di bab ini, kita akan men-deploy aplikasi Next.js kita menggunakan Vercel, platform hosting yang dibuat oleh tim yang sama di belakang Next.js. Ini adalah cara termudah, tercepat, dan paling direkomendasikan untuk menghosting aplikasi Next.js.
1. Kenapa Pakai Vercel?
Integrasi Sempurna: Karena berasal dari "dapur" yang sama, Vercel memahami setiap seluk-beluk Next.js. Semua fitur, seperti Server Components, rute dinamis, dan optimasi gambar, bekerja secara otomatis tanpa konfigurasi.
Deployment Berbasis Git: Alur kerjanya sangat intuitif. Kamu cukup git push ke repositorimu, dan Vercel akan secara otomatis membangun dan men-deploy versi terbarunya.
Performa Global (CDN): Situsmu akan disajikan dari Content Delivery Network (CDN) global Vercel. Artinya, pengunjung dari mana pun di dunia akan merasakan kecepatan loading yang luar biasa.
Paket Personal Gratis: Untuk proyek pribadi dan hobi, paket "Hobby" dari Vercel sudah lebih dari cukup dan sepenuhnya gratis.
2. Langkah-langkah Deployment
Prosesnya sangat sederhana dan hanya terdiri dari dua tahap utama: menyiapkan kode di GitHub dan menghubungkannya ke Vercel.
Tahap 1: Menyiapkan Repositori di GitHub
Vercel bekerja dengan menghubungkan ke repositori Git. GitHub adalah pilihan paling populer.
Buat Akun GitHub: Jika belum punya, buat akun gratis di github.com.
Buat Repositori Baru:
Di halaman utama GitHub, klik tombol "New" atau tanda + di pojok kanan atas, lalu pilih "New repository".
Beri nama repositorimu, misalnya blog-profesional-nextjs.
Biarkan sebagai "Public".
Klik "Create repository".
Hubungkan Proyek Lokal ke GitHub:
Buka terminal di direktori proyek lokalmu.
Inisialisasi Git (jika belum): git init
Tambahkan semua file: git add .
Buat commit pertama: git commit -m "Initial commit: Proyek blog siap untuk deploy"
GitHub akan memberimu beberapa perintah untuk menghubungkan repositori. Salin dan jalankan perintah yang mirip seperti ini (sesuaikan dengan URL repositorimu):
Daftar menggunakan akun GitHub-mu. Ini adalah cara termudah karena akan otomatis memberikan izin yang dibutuhkan Vercel.
Impor Proyek dari GitHub:
Setelah masuk, kamu akan berada di dashboard Vercel. Klik tombol "Add New..." lalu pilih "Project".
Vercel akan menampilkan daftar repositori GitHub-mu. Temukan blog-profesional-nextjs dan klik "Import".
Konfigurasi dan Deploy:
Vercel sangat pintar. Ia akan otomatis mendeteksi bahwa ini adalah proyek Next.js dan mengisi semua pengaturan build secara default. Kamu tidak perlu mengubah apa pun!
Cukup klik tombol "Deploy".
Tunggu dan Rayakan!
Vercel akan mulai mengambil kodemu dari GitHub, melakukan proses build (npm run build), dan men-deploy hasilnya ke CDN global mereka. Kamu bisa melihat log prosesnya secara real-time.
Proses ini biasanya memakan waktu 1-2 menit. Setelah selesai, Vercel akan menampilkan confetti dan yang terpenting: memberimu beberapa URL publik (misalnya, blog-profesional-nextjs.vercel.app).
Klik salah satu URL tersebut. SELAMAT! Blog-mu sekarang sudah LIVE di internet! š
Bagikan URL ini ke teman-temanmu, keluarga, atau di media sosial. Kamu pantas bangga dengan apa yang telah kamu bangun.
3. Alur Kerja Selanjutnya: Continuous Deployment
Bagian terbaik dari Vercel adalah Continuous Deployment. Apa artinya?
Setiap kali kamu ingin memperbarui blog-mu (misalnya, menambahkan artikel baru atau mengubah desain):
Lakukan perubahan di kodemu secara lokal.
Buat file artikel .mdx baru di folder posts.
Jalankan git add ., git commit -m "Pesan commit yang deskriptif", dan git push.
Itu saja! Vercel akan mendeteksi push baru tersebut dan secara otomatis memulai proses deployment ulang. Dalam beberapa menit, perubahanmu akan live.
Alur kerja ini sangat efisien dan merupakan standar di industri pengembangan web modern.
Rangkuman & Penutup Seri Proyek
Kamu telah berhasil menyelesaikan perjalanan yang luar biasa. Dari folder kosong hingga sebuah blog profesional yang live di internet.
Mari kita rekap apa yang telah kita kuasai:
ā Fondasi & Desain: Setup proyek, layout, dan dark mode.
ā Manajemen Konten: Membaca data dari file MDX.
ā Routing Next.js: Menampilkan daftar dan detail artikel dengan rute dinamis.
ā Styling Profesional: Menggunakan Tailwind Typography dan syntax highlighting.
ā SEO: Menerapkan metadata dinamis dan sitemap.
ā Deployment: Mempublikasikan aplikasi ke Vercel.
Kamu tidak hanya belajar membuat sebuah blog. Kamu telah belajar bagaimana berpikir dan bekerja seperti seorang developer web profesional. Keterampilan yang kamu dapatkan di sini adalah fondasi yang bisa kamu gunakan untuk membangun proyek apa pun yang kamu impikan selanjutnya.
Teruslah menulis, teruslah belajar, dan teruslah berkarya. Dunia web ada di tanganmu. Sampai jumpa di proyek selanjutnya
Checkpoint KuisTarget: 70%
Kuis Deployment ke Vercel
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
