Cara Setting DNS Record untuk next.js (vercel) dan headless WordPress

Jika kita ingin membuat blog yang dapat di custom tampilan nya sesuai keinginan sendiri , kita dapat menggunakan Next.js sebagai front-end nya dan menggunakan WordPress sebagai CMS nya. Kita dapat menaruh Next.js sebagai front-end nya pada Vercel secara gratis, lalu kita taruh WordPress nya pada jasa hosting berbayar. Jika kita menggunakan skema ini, salah satu hal penting yang harus dilakukan adalah mengatur DNS record dengan benar. Tanpa pengaturan DNS yang tepat, custom domain kita tidak akan bisa mengarah ke project Next.js di Vercel, dan koneksi ke CMS WordPress juga bisa terganggu.

Jika kita ingin membuat blog yang dapat di custom tampilan nya sesuai keinginan sendiri , kita dapat menggunakan Next.js sebagai front-end nya dan menggunakan WordPress sebagai CMS nya. Kita dapat menaruh Next.js sebagai front-end nya pada Vercel secara gratis, lalu kita taruh WordPress nya pada jasa hosting berbayar. Jika kita menggunakan skema ini, salah satu hal penting yang harus dilakukan adalah mengatur DNS record dengan benar. Tanpa pengaturan DNS yang tepat, custom domain kita tidak akan bisa mengarah ke project Next.js di Vercel, dan koneksi ke CMS WordPress juga bisa terganggu.

Dalam panduan ini, kita akan bahas langkah-langkah menghubungkan custom domain ke Vercel, lalu memastikan integrasi dengan WordPress berjalan lancar, lalu memastikan integrasi dengan WordPress berjalan lancar. Cocok untuk anda yang ingin membangun website modern dengan performa tinggi dan sistem manajemen konten fleksibel.

1. Menambahkan Custom Domain di Vercel

• Masuk ke dashboard Vercel.
• Pilih project Next.js yang ingin kita hubungkan.
• Klik tab Settings > Domains.
• Masukkan domain (contoh: contohdomain.com) lalu klik Add.
• Vercel akan menampilkan instruksi DNS — biasanya berupa CNAME (untuk subdomain) atau A Record (untuk root domain).
  

2. Mengatur DNS Record di Pengelola Domain

Masuk ke cpanel hosting (contoh: Cloudflare, Niagahoster, Domainesia, Rumahweb, dsb).
Lalu buka zone-editor pada cpanel dan tambahkan DNS-nya sesuai instruksi dari Vercel:

Untuk root domain (contoh.com):

• Type: A
• Name: @
• Value: 76.76.21.21 (alamat IP Vercel)

Untuk subdomain (www.example.com ):

• Type: CNAME
• Name: www
• Value: cname.vercel-dns.com

Pastikan tidak ada record lama yang bentrok seperti A record ke IP hosting . Biasa nya terdapat record lama yang mengarahkan ke ip Hosting , hapus saja

3. Verifikasi Domain

Kembali ke dashboard Vercel dan klik tombol Verify.
Jika DNS sudah benar dan propagasi selesai, domain akan aktif dalam beberapa menit hingga maksimal 24 jam.

Kita sudah dapat membuka front-end blog kita dengan domain(contoh.com) yang telah didaftarkan. Kita dapat menguji nya dengan cara membuka melalui incognito di browser agar tidak ada cache lama yang tersangkut.

4. Mendaftarkan Subdomain Untuk Tetap Dapat Membuka wp-admin

Jika kita membuka wp-admin melalu contoh.com/wp-admin maka tidak akan terbuka atau error , salah satu cara untuk tetap dapat membuka wp-admin adalah dengan cara menggunakan subdomain seperti wp.contoh.com/wp-admin .

• Masuk ke menu domain pada cpanel
• Tambahkan domain baru
• Buat dengan nama yang diinginkan (contoh : wp.contoh.com)
• Tambahkan /public_html pada document_root
• Klik Submit

Masih pada Cpanel , buka menu SSL/TLS Status , cek apakah wp.contoh.com sudah muncul jika sudah ada tinggal klik run autoSSL dan tunggu hingga proses nya selesai

6. Edit Konfigurasi Domain WordPress-nya

Masuk ke File Manager di cPanel.

Buka folder tempat WordPress kita berada (biasanya di public_html).

Edit file wp-config.php.

Tambahkan 2 baris ini (sebelum baris /* That's all, stop editing! */):

define('WP_HOME', 'https://wp.contoh-com');
define('WP_SITEURL', 'contoh-com');

Jika semua step telah berhasil dilakukan maka kita dapat melakukan pengecekan dengan membuka contoh.com akan membuka next.js kita di vercel dan jika membuka wp.contoh.com akan membuka wordpress yang di hosting, lalu wp.contoh.com/wp-admin untuk dapat membuka dashboard wordpress.

Dengan pengaturan DNS yang tepat, kita bisa mengarahkan domain ke Vercel dan tetap memanfaatkan kekuatan WordPress sebagai headless CMS. Kini situs kita siap online dengan performa dan fleksibilitas maksimal.