🚀 Cara Deploy Next.js di Vercel Gratis (Step-by-step untuk Pemula)

 

📌 Pendahuluan

Kalau kamu sedang membangun aplikasi menggunakan Next.js, pasti butuh hosting yang cepat, gratis, dan mudah setup tanpa ribet konfigurasi server.

Kabar baiknya, Next.js dibuat oleh tim yang sama dengan Vercel, jadi proses deploy bisa dilakukan hanya dalam kurang dari 5 menit.

Di artikel ini saya akan membahas:

✅ Deploy Next.js gratis
✅ Tanpa server manual
✅ Tanpa setting Nginx
✅ Tanpa VPS
✅ Auto HTTPS + domain

Bahkan cocok untuk:

• portfolio
• landing page
• MVP startup
• side project
• demo client

---

🧠 Kenapa Pakai Vercel?

Beberapa keunggulan Vercel:

• Gratis (free tier cukup besar)
• Auto HTTPS
• Auto CI/CD
• Deploy dari GitHub
• Serverless (tidak perlu urus server)
• Optimasi khusus Next.js
• Global CDN (cepat di seluruh dunia)

Jujur saja, untuk project kecil–menengah, ini sudah lebih dari cukup.

---

🛠️ Step 1 — Install Node.js & Buat Project Next.js

Kalau belum punya project:

npx create-next-app@latest my-app
cd my-app
npm run dev

Buka:

http://localhost:3000

Kalau muncul halaman Next.js berarti siap.

---

🛠️ Step 2 — Push ke GitHub

Vercel akan auto deploy dari GitHub.

Inisialisasi git

git init
git add .
git commit -m "first commit"

Buat repo di GitHub lalu push

git remote add origin https://github.com/username/my-app.git
git push -u origin main

Selesai.

---

🛠️ Step 3 — Login ke Vercel

Masuk ke:
👉 https://vercel.com

Login pakai:

• GitHub (recommended)
• Google
• Email

Kalau login pakai GitHub, repo otomatis terbaca.

---

🛠️ Step 4 — Import Project

Di dashboard:

1️⃣ Klik Add New Project
2️⃣ Pilih repo Next.js
3️⃣ Klik Import

Biasanya Vercel otomatis detect:

Framework : Next.js
Build : next build
Output : .next

Jadi gak perlu setting apa-apa.

Klik:
👉 Deploy

Tunggu ±1 menit.

---

🛠️ Step 5 — Selesai 🎉

Kalau berhasil, kamu akan dapat:

https://my-app.vercel.app

Boom.
Website langsung live + HTTPS.

Tanpa server. Tanpa ribet.

---

🔄 Bonus — Auto Deploy Setiap Push

Setiap kamu push:

git push

Vercel otomatis:

• build ulang
• deploy ulang
• update website

Jadi alurnya:

Code → Push → Live

Cuma 1 langkah. Developer heaven 😄

---

⚙️ Bonus — Tambah Environment Variable

Kalau pakai API key / DB:

Dashboard → Settings → Environment Variables

Tambahkan:

MONGODB_URI=xxxxx
JWT_SECRET=xxxxx

Lalu redeploy.

---

🌍 Bonus — Pakai Domain Sendiri

Kalau mau custom domain:

Dashboard → Domains → Add

Contoh:

tamvanblog.web.id
app.tamvanblog.web.id

Tinggal arahkan DNS.

Gratis + SSL otomatis.

---

📊 Limit Free Tier Vercel (Realistis Banget)

Free plan cukup besar untuk:

• hobby project

• portfolio

• blog

• small app

Kurang lebih:

• 100GB bandwidth/bulan

• serverless function

• unlimited deploy

Untuk MVP? Aman banget.

---

⚠️ Error yang Sering Terjadi

❌ Build failed

Biasanya:

Module not found

Solusi:

npm run build

lokal dulu cek error.

---

❌ Environment variable undefined

Pastikan:

• set di dashboard

• bukan .env lokal saja

---

❌ API lambat

Gunakan:

edge function / region dekat Asia

---

🧠 Tips Pro (biar production ready)

Beberapa best practice:

✅ pakai Image Optimization (next/image)
✅ pakai ISR/SSG
✅ jangan fetch berat di client
✅ compress image
✅ gunakan CDN

Next.js + Vercel sudah otomatis cepat, tinggal optimasi kecil saja.

---

🎯 Kesimpulan

Deploy Next.js sekarang benar-benar gampang.

Dengan Vercel kamu dapat:

• gratis
• cepat
• auto deploy
• tanpa server
• tanpa DevOps ribet

Cukup push ke GitHub → langsung live.

Buat saya pribadi, ini solusi paling praktis untuk project modern.

Kalau kamu baru mulai belajar Next.js, sangat recommended pakai Vercel dulu sebelum pindah ke VPS.