🧩 1. Persiapan Awal

Pastikan kamu sudah memiliki:

Akun Vercel
Repository project di GitHub, GitLab, atau Bitbucket
Project yang sudah berjalan lokal dengan:
Next.js: npm run dev atau yarn dev
React: npm start atau yarn start
HTML: folder berisi file index.html

⚙️ 2. Struktur Project

Pastikan struktur project kamu sudah benar:

Next.js

my-next-app/

├─ pages/

├─ public/

├─ package.json

├─ next.config.js

React (CRA atau Vite)

my-react-app/

├─ src/

├─ public/

├─ package.json

HTML

my-static-site/

├─ index.html

├─ styles.css

├─ script.js

🚀 3. Deploy ke Vercel

Langkah 1 — Login ke Vercel

Kunjungi https://vercel.com
Klik “Login” → pilih akun GitHub atau GitLab.

Langkah 2 — Import Project

Klik tombol “Add New Project”
Pilih repository project kamu dari GitHub.
Klik “Import”

Langkah 3 — Konfigurasi Build

Vercel biasanya mendeteksi framework secara otomatis, tapi berikut panduannya jika ingin manual:

Next.js
Framework preset: Next.js
Build command: next build
Output directory: .next
React (CRA/Vite)
Framework preset: React
Build command: npm run build
Output directory: build atau dist
HTML statis
Framework preset: Other
Output directory: tempat index.html berada (misalnya public/ atau root)

Langkah 4 — Deploy

Klik “Deploy” dan tunggu proses selesai.

Setelah itu, Vercel akan memberikan URL otomatis seperti:

https://nama-project.vercel.app

🔄 4. Update Project

Setiap kali kamu melakukan push ke GitHub, Vercel akan otomatis:

Menjalankan ulang proses build
Mengupdate versi website kamu tanpa konfigurasi tambahan

🧠 5. Tips Tambahan

Gunakan file .env di Vercel untuk menyimpan API keys atau environment variables.
(Menu: Project Settings → Environment Variables)
Untuk custom domain, buka Settings → Domains → Add Domain.
Kamu bisa men-deploy manual dengan CLI:

npm i -g vercel

vercel

✅ Kesimpulan

Deploy ke Vercel sangat mudah, baik untuk:

Next.js (framework bawaan Vercel)
React.js (CRA atau Vite)
HTML statis

Cukup hubungkan ke GitHub → klik deploy → website langsung online.

Contoh hasil akhir:

https://my-next-app.vercel.app

https://my-react-app.vercel.app

https://my-static-site.vercel.app

Dengan langkah di atas, kamu bisa memiliki website production-ready hanya dalam beberapa menit, tanpa server manual atau konfigurasi rumit.

Cara Deploy Project Next.js, React, dan HTML ke Vercel