Punya project di Vercel tapi masih pakai domain *.vercel.app? Saatnya upgrade ke custom domain! Di tutorial ini, kita akan setup domain custom menggunakan Cloudflare sebagai DNS manager—kombinasi yang powerful untuk performa dan keamanan website kamu.

Kenapa Harus Custom Domain?

Sebelum mulai, ini alasan kenapa custom domain itu penting:

Profesionalisme — namaproject.com lebih kredibel daripada namaproject.vercel.app
Branding — Domain sendiri = identitas brand yang kuat
SEO — Search engine lebih favor custom domain
Email profesional — Bisa setup email hello@namaproject.com
Full control — Kamu yang punya, kamu yang atur

Step 1: Beli Domain

Pertama, kamu butuh domain. Beberapa registrar yang recommended:

Opsi 1: Niagahoster (Lokal)

Harga kompetitif untuk domain .id
Support bahasa Indonesia
Pembayaran lokal (transfer bank, e-wallet)

Opsi 2: Namecheap

Harga murah untuk TLD populer (.com, .dev, .io)
Free WhoisGuard (privacy protection)
Interface user-friendly

Opsi 3: Cloudflare Registrar

Harga at-cost (tanpa markup)
Langsung terintegrasi dengan Cloudflare DNS
Tidak ada biaya renewal yang naik

Pro tip: Kalau beli domain di Cloudflare Registrar, step 2 bisa di-skip karena DNS sudah otomatis di Cloudflare.

Step 2: Setup Cloudflare DNS

Cloudflare bakal jadi DNS manager kita. Ini yang bikin website lebih cepat dan aman.

2.1 Buat Akun Cloudflare

Pergi ke cloudflare.com
Klik Sign Up dan buat akun
Pilih plan Free (sudah cukup untuk kebanyakan use case)

2.2 Tambahkan Domain

Di dashboard, klik Add a Site
Masukkan domain kamu (contoh: namaproject.com)
Pilih plan Free, lalu klik Continue
Cloudflare akan scan DNS records yang ada

2.3 Update Nameserver

Cloudflare akan kasih 2 nameserver, contohnya:

ada.ns.cloudflare.com
bob.ns.cloudflare.com

Pergi ke registrar tempat kamu beli domain, lalu ganti nameserver ke yang diberikan Cloudflare.

Di Niagahoster:

Login ke Member Area
Pilih domain → Kelola Domain
Cari Nameserver → Ubah Nameserver
Masukkan nameserver Cloudflare

Di Namecheap:

Login → Domain List
Klik Manage di domain kamu
Di bagian Nameservers, pilih Custom DNS
Masukkan nameserver Cloudflare

Propagasi DNS biasanya 5-30 menit, tapi bisa sampai 24 jam.

Step 3: Connect Domain ke Vercel

Sekarang kita hubungkan domain ke project Vercel.

3.1 Tambahkan Domain di Vercel

Buka vercel.com dan login
Pilih project yang mau di-connect
Pergi ke Settings → Domains
Klik Add dan masukkan domain kamu
Vercel akan tampilkan instruksi DNS

3.2 Tambahkan DNS Records di Cloudflare

Vercel biasanya minta kamu tambahkan salah satu dari ini:

Opsi A - A Record (recommended untuk apex domain):

Type	Name	Content
A	@	76.76.21.21

Opsi B - CNAME Record (untuk www atau subdomain):

Type	Name	Content
CNAME	www	cname.vercel-dns.com

Cara tambah di Cloudflare:

Pergi ke dashboard domain kamu
Klik tab DNS → Records
Klik Add record
Isi sesuai tabel di atas
Penting: Set proxy status ke DNS only (icon awan abu-abu)

3.3 Kenapa Proxy Harus Off?

Vercel sudah punya CDN dan SSL sendiri. Kalau Cloudflare proxy aktif (awan orange), bisa terjadi:

SSL conflict
Redirect loop
Performance issues

Jadi untuk domain utama, matikan proxy Cloudflare.

Step 4: SSL Configuration

Vercel otomatis generate SSL certificate gratis via Let’s Encrypt. Tapi kita perlu pastikan settingan benar.

4.1 Vercel SSL

Di Vercel dashboard → Settings → Domains
Pastikan domain punya status Valid Configuration
SSL certificate akan auto-generate dalam beberapa menit

4.2 Cloudflare SSL Settings

Karena proxy off, SSL sepenuhnya di-handle Vercel. Tapi kalau kamu enable proxy untuk subdomain lain:

Pergi ke SSL/TLS di Cloudflare
Set mode ke Full (strict)
Ini mencegah mixed content dan SSL errors

Step 5: Redirect www ke non-www (atau sebaliknya)

Pilih satu versi sebagai primary domain. Biasanya developer prefer non-www (namaproject.com).

5.1 Setup di Vercel

Di Settings → Domains, tambahkan kedua versi:
- namaproject.com
- www.namaproject.com
Klik salah satu dan pilih Set as Primary
Versi lain akan auto-redirect ke primary

5.2 DNS Records untuk Keduanya

Di Cloudflare, tambahkan:

Type	Name	Content	Proxy
A	@	76.76.21.21	Off
CNAME	www	cname.vercel-dns.com	Off

Step 6: Setup Multiple Domains

Punya lebih dari satu domain untuk satu project? Gampang.

6.1 Tambahkan Semua Domain di Vercel

Settings → Domains → Add
Tambahkan tiap domain (contoh: namaproject.id, namaproject.co.id)
Set satu sebagai primary, sisanya jadi redirect

6.2 DNS Setup untuk Tiap Domain

Ulangi Step 3.2 untuk setiap domain di Cloudflare masing-masing.

Step 7: Setup Subdomain

Mau bikin blog.namaproject.com atau api.namaproject.com? Here’s how.

7.1 Di Vercel

Kamu punya 2 opsi:

Opsi A - Subdomain untuk project yang sama:

Settings → Domains → Add
Masukkan blog.namaproject.com
Akan pointing ke project yang sama

Opsi B - Subdomain untuk project berbeda:

Buka project lain di Vercel
Tambahkan subdomain di Settings → Domains

7.2 Di Cloudflare

Tambahkan CNAME record:

Type	Name	Content	Proxy
CNAME	blog	cname.vercel-dns.com	Off
CNAME	api	cname.vercel-dns.com	Off

Step 8: CDN Optimization

Meskipun Vercel sudah punya Edge Network, ada beberapa optimasi tambahan.

8.1 Vercel Edge Network

Project Vercel otomatis di-deploy ke edge locations global. Untuk Indonesia, biasanya dilayani dari Singapore.

8.2 Enable Cloudflare Features (Untuk Subdomain dengan Proxy On)

Kalau ada subdomain yang proxy-nya aktif, enable:

Speed → Optimization
- Auto Minify (HTML, CSS, JS)
- Brotli compression
Caching → Configuration
- Browser Cache TTL: 1 month
- Set caching rules untuk static assets
Speed → Image Optimization (Pro plan)
- Polish: Lossless atau Lossy
- WebP conversion

8.3 Page Rules (Legacy) atau Rules

Buat rule untuk static assets:

URL: *namaproject.com/assets/*
Setting: Cache Level = Cache Everything
Edge Cache TTL: 1 month

Step 9: Troubleshooting DNS Issues

Kadang ada masalah. Ini cara debug-nya.

9.1 “DNS_PROBE_FINISHED_NXDOMAIN”

Penyebab: DNS belum propagate atau record salah.

Solusi:

Cek nameserver sudah update di registrar
Tunggu propagasi (cek di whatsmydns.net)
Verify DNS records di Cloudflare

9.2 “Too Many Redirects” atau “ERR_TOO_MANY_REDIRECTS”

Penyebab: SSL conflict antara Cloudflare dan Vercel.

Solusi:

Matikan proxy Cloudflare (set ke DNS only)
Atau set SSL mode ke Full (strict)
Clear browser cache dan cookies

9.3 “Invalid Configuration” di Vercel

Penyebab: DNS records tidak sesuai.

Solusi:

Pastikan A record pointing ke 76.76.21.21
Atau CNAME pointing ke cname.vercel-dns.com
Hapus conflicting records
Tunggu beberapa menit dan refresh Vercel dashboard

9.4 SSL Certificate Not Generated

Penyebab: DNS belum propagate atau CAA record blocking.

Solusi:

Pastikan tidak ada CAA record yang block Let’s Encrypt
Atau tambahkan CAA record yang allow:

Type	Name	Content
CAA	@	0 issue “letsencrypt.org”

9.5 Cek Propagasi DNS

Gunakan tools ini untuk verify:

whatsmydns.net — Global DNS propagation
dnschecker.org — Multiple DNS check
Terminal: dig namaproject.com +short atau nslookup namaproject.com

Quick Checklist

Sebelum go-live, pastikan:

Domain sudah dibeli dan aktif
Nameserver pointing ke Cloudflare
DNS records sudah ditambahkan dengan benar
Proxy Cloudflare off untuk domain utama
Domain valid di Vercel dashboard
SSL certificate sudah generated
Redirect www ↔ non-www sudah setup
Test akses dari browser (clear cache dulu)

Kesimpulan

Setup custom domain di Vercel dengan Cloudflare memang butuh beberapa langkah, tapi hasilnya worth it. Kamu dapat:

Custom domain yang profesional
DNS management yang powerful
SSL gratis dan auto-renew
Global CDN untuk performa optimal
DDoS protection dari Cloudflare (meski proxy off, basic protection tetap ada)

Kalau ada pertanyaan atau stuck di salah satu step, feel free to reach out. Happy deploying! 🚀