Cara Deploy WordPress Headless ke Vercel Secara Gratis Panduan Lengkap + Studi Kasus Loading

WordPress selama ini dikenal sebagai platform yang mudah digunakan karena pengguna bisa mengelola konten, plugin, media, dan halaman langsung dari dashboard. Namun, WordPress tidak harus selalu digunakan sekaligus sebagai CMS dan frontend.

Salah satu pendekatan yang semakin menarik adalah Headless WordPress.

Dengan arsitektur ini, WordPress tetap digunakan sebagai CMS atau tempat mengelola konten, sedangkan tampilan website dibuat menggunakan framework modern seperti Next.js dan kemudian di-deploy ke Vercel.

Hasilnya, kita mendapatkan kombinasi:

WordPress sebagai CMS.
Next.js sebagai frontend.
WordPress REST API sebagai penghubung.
Vercel sebagai platform deployment dan CDN.
GitHub sebagai tempat menyimpan kode.

Yang menarik, untuk proyek kecil, portofolio, eksperimen, atau website pribadi, arsitektur seperti ini bisa dicoba dengan Vercel Hobby yang berbiaya $0/bulan, selama penggunaannya tetap sesuai batas dan ketentuan paket tersebut.

Pada artikel ini saya akan menunjukkan prosesnya dari awal, mulai dari menyiapkan WordPress, membuat aplikasi Next.js, menghubungkannya dengan WordPress REST API, sampai melakukan deployment ke Vercel.

Apa Itu Headless WordPress?

Sebelum masuk ke proses instalasi, kita perlu memahami konsepnya terlebih dahulu.

Pada WordPress biasa, satu instalasi WordPress menangani dua pekerjaan sekaligus:

Backend/CMS

Tempat administrator:

menulis artikel,
mengelola halaman,
mengunggah gambar,
mengatur kategori,
mengelola pengguna.

Frontend

Bagian yang dilihat pengunjung ketika membuka website.

Pada Headless WordPress, kedua bagian tersebut dipisahkan.

             ADMIN
               │
               ▼
       ┌─────────────────┐
       │    WordPress    │
       │      CMS        │
       └────────┬────────┘
                │
                │ REST API
                ▼
       ┌─────────────────┐
       │     Next.js     │
       │    Frontend     │
       └────────┬────────┘
                │
                ▼
       ┌─────────────────┐
       │     Vercel      │
       │ CDN + Hosting   │
       └────────┬────────┘
                │
                ▼
             Visitor

WordPress sendiri sudah menyediakan REST API yang memungkinkan aplikasi eksternal mengambil data dalam format JSON. Endpoint seperti /wp/v2/posts digunakan untuk mengambil artikel, sedangkan /wp/v2/pages digunakan untuk halaman.

Artinya, Next.js tidak perlu menggunakan theme WordPress untuk menampilkan halaman.

Next.js cukup meminta data dari WordPress.

Kapan Headless WordPress Layak Digunakan?

Headless WordPress bukan berarti otomatis lebih baik daripada WordPress biasa.

Ada beberapa kondisi ketika arsitektur ini menarik.

Cocok untuk:

website company profile modern,
blog dengan kebutuhan performa tinggi,
portal konten,
website berita,
landing page,
website dengan frontend custom,
proyek yang membutuhkan React/Next.js,
eksperimen Jamstack atau modern web development.

Namun, untuk website sederhana yang hanya membutuhkan beberapa halaman dan tidak memiliki kebutuhan frontend khusus, WordPress biasa sering kali jauh lebih praktis.

Ini salah satu hal yang menurut saya penting.

Jangan menggunakan Headless hanya karena terlihat lebih modern.

Gunakan jika ada masalah atau kebutuhan yang memang ingin diselesaikan.

Persiapan Sebelum Deploy

Dalam tutorial ini kita menggunakan:

WordPress
WordPress REST API
Next.js
React
GitHub
Vercel
Node.js
npm

Kita juga membutuhkan:

Website WordPress yang sudah online.
Akses administrator WordPress.
Akun GitHub.
Akun Vercel.
Node.js pada komputer lokal.

Vercel memberikan dukungan first-class untuk Next.js dan deployment Next.js dapat dilakukan tanpa konfigurasi rumit.

1. Siapkan WordPress

Pertama, pastikan WordPress dapat diakses melalui HTTPS.

Contohnya:

https://domainanda.com

Untuk memeriksa apakah REST API WordPress berjalan, buka:

https://domainanda.com/wp-json/

Jika REST API aktif, browser akan menampilkan response JSON.

WordPress REST API memang tersedia sebagai bagian dari WordPress dan menyediakan endpoint untuk berbagai resource seperti posts, pages, media, categories, dan tags.

2. Tes Endpoint Artikel WordPress

Sekarang coba buka:

https://domainanda.com/wp-json/wp/v2/posts

Jika sudah terdapat artikel, kita akan mendapatkan data dalam format JSON.

Contoh sederhananya:

[
  {
    "id": 123,
    "date": "2026-09-12T10:00:00",
    "slug": "contoh-artikel",
    "title": {
      "rendered": "Contoh Artikel"
    },
    "content": {
      "rendered": "<p>Isi artikel...</p>"
    }
  }
]

WordPress menyediakan parameter seperti page, per_page, search, after, dan before sehingga aplikasi frontend dapat mengontrol data yang diminta.

Ini penting untuk website yang memiliki banyak artikel.

Jangan mengambil seluruh database artikel sekaligus.

Misalnya:

/wp-json/wp/v2/posts?per_page=10&page=1

Kemudian halaman berikutnya:

/wp-json/wp/v2/posts?per_page=10&page=2

REST API WordPress memang mendukung pagination menggunakan parameter page dan per_page.

3. Instal Node.js

Jika belum memiliki Node.js, instal versi Node.js yang sesuai dengan versi Next.js yang digunakan.

Untuk starter Headless WordPress modern dari Vercel, misalnya, dokumentasinya saat ini mencantumkan Node.js 22.13 atau lebih baru.

Setelah instalasi, buka Terminal atau Command Prompt.

Cek:

node -v

Kemudian:

npm -v

Jika keduanya menampilkan nomor versi, berarti Node.js sudah siap digunakan.

4. Buat Project Next.js

Kita bisa membuat aplikasi Next.js baru dengan:

npx create-next-app@latest wordpress-headless

Ikuti pertanyaan instalasi.

Untuk tutorial ini saya menyarankan:

TypeScript       Yes
ESLint           Yes
Tailwind CSS     Yes
src/ directory   Yes
App Router       Yes
Turbopack        Yes

Kemudian masuk ke folder:

cd wordpress-headless

Jalankan:

npm run dev

Buka:

http://localhost:3000

Jika halaman Next.js muncul, frontend sudah berhasil dibuat.

5. Hubungkan Next.js dengan WordPress

Sekarang kita mulai bagian yang paling penting.

Buat file:

.env.local

Isi:

WORDPRESS_API_URL=https://domainanda.com/wp-json/wp/v2

Ganti:

https://domainanda.com

dengan alamat WordPress Anda.

Jangan memasukkan informasi login administrator WordPress ke dalam kode frontend.

Untuk membaca artikel publik, REST API WordPress pada dasarnya dapat digunakan tanpa autentikasi. WordPress menjelaskan bahwa data publik umumnya dapat diakses melalui REST API, sedangkan data privat membutuhkan autentikasi.

6. Buat Fungsi Mengambil Artikel

Misalnya kita membuat:

src/lib/wordpress.ts

Kemudian:

const API_URL = process.env.WORDPRESS_API_URL;

export async function getPosts() {
  const response = await fetch(
    `${API_URL}/posts?per_page=10&_embed`,
    {
      next: {
        revalidate: 60,
      },
    }
  );

  if (!response.ok) {
    throw new Error("Gagal mengambil artikel WordPress");
  }

  return response.json();
}

Parameter:

revalidate: 60

digunakan agar data tidak harus selalu diambil ulang pada setiap request.

Dengan pendekatan seperti ini, kita dapat memanfaatkan konsep caching dan revalidation di Next.js.

7. Tampilkan Artikel di Homepage

Contoh sederhana:

import { getPosts } from "@/lib/wordpress";

export default async function Home() {
  const posts = await getPosts();

  return (
    <main>
      <h1>Blog Headless WordPress</h1>

      {posts.map((post: any) => (
        <article key={post.id}>
          <h2
            dangerouslySetInnerHTML={{
              __html: post.title.rendered,
            }}
          />

          <div
            dangerouslySetInnerHTML={{
              __html: post.excerpt.rendered,
            }}
          />
        </article>
      ))}
    </main>
  );
}

Sekarang Next.js sudah mengambil data langsung dari WordPress.

8. Buat Repository GitHub

Sebelum deployment, simpan project ke GitHub.

Di folder project:

git init

Kemudian:

git add .

Commit:

git commit -m "Initial headless WordPress"

Hubungkan dengan repository GitHub:

git remote add origin https://github.com/USERNAME/wordpress-headless.git

Kemudian:

git branch -M main
git push -u origin main

9. Deploy ke Vercel

Sekarang masuk ke Vercel.

Buka:

Vercel

Dari dashboard pilih:

Add New → Project

Vercel menyediakan workflow untuk mengimpor repository Git dan secara otomatis melakukan deployment ketika terdapat perubahan pada branch yang terhubung.

Pilih repository:

wordpress-headless

Kemudian klik:

Import

10. Konfigurasi Project

Biasanya Vercel akan mendeteksi Next.js secara otomatis.

Pastikan kurang lebih seperti:

Framework Preset
Next.js

Root Directory
./

Build Command
npm run build

Output Directory
.next

Tidak perlu mengubah konfigurasi jika semuanya sudah terdeteksi dengan benar.

11. Masukkan Environment Variable

Ini bagian yang sering terlupakan.

Pada halaman konfigurasi Vercel, cari:

Environment Variables

Tambahkan:

Name:
WORDPRESS_API_URL

Value:
https://domainanda.com/wp-json/wp/v2

Simpan variabel tersebut.

Vercel menyediakan pengaturan environment variable berdasarkan environment seperti Development, Preview, dan Production.

12. Klik Deploy

Setelah semua konfigurasi benar:

Deploy

Vercel akan:

mengambil repository GitHub,
menginstal dependency,
menjalankan proses build,
menghasilkan deployment,
memberikan URL deployment.

Contohnya:

https://wordpress-headless.vercel.app

Setiap deployment juga memiliki URL unik yang dapat digunakan untuk menguji hasil build sebelum digunakan sebagai production deployment.

13. Hubungkan Custom Domain

Setelah deployment berhasil, kita bisa menggunakan domain sendiri.

Masuk ke:

Project
→ Settings
→ Domains

Kemudian tambahkan:

www.domainanda.com

atau:

domainanda.com

Vercel menyediakan pengaturan domain dari Project Settings.

Setelah itu ikuti instruksi DNS yang diberikan Vercel.

14. Bagaimana WordPress dan Vercel Bekerja Setelah Deployment?

Setelah semuanya selesai, arsitekturnya menjadi:

Pengunjung
     │
     ▼
Domain
     │
     ▼
Vercel
     │
     ▼
Next.js
     │
     │ request API
     ▼
WordPress
     │
     ▼
WordPress REST API

Jadi ketika administrator menulis artikel:

WordPress
   ↓
REST API
   ↓
Next.js
   ↓
Vercel
   ↓
Pengunjung

WordPress tidak lagi menjadi server frontend utama.

Ini adalah perbedaan fundamental antara WordPress tradisional dan Headless WordPress.

Studi Kasus: Apakah Headless WordPress Benar-Benar Lebih Cepat?

Ini bagian yang menurut saya paling penting.

Banyak artikel tentang Headless WordPress langsung mengatakan:

"Headless pasti lebih cepat."

Menurut saya, pernyataan tersebut terlalu sederhana.

Headless bisa membantu performa, tetapi bukan berarti otomatis lebih cepat.

Hasil akhirnya sangat bergantung pada:

ukuran halaman,
jumlah JavaScript,
ukuran gambar,
cara mengambil data WordPress,
caching,
rendering strategy,
CDN,
font,
third-party scripts,
analytics,
iklan,
dan kualitas kode frontend.

Vercel sendiri menyediakan dukungan untuk static generation dan distribusi halaman Next.js melalui CDN.

Metode Pengujian

Agar pengujian tidak bias, gunakan kondisi yang sama.

Misalnya kita membandingkan:

Website A

WordPress biasa:

WordPress
+
Theme
+
Plugin
+
PHP
+
Database

dengan:

Website B

Headless:

WordPress
     ↓
REST API
     ↓
Next.js
     ↓
Vercel
     ↓
CDN

Kemudian keduanya diuji menggunakan:

Google PageSpeed Insights
Lighthouse
Chrome DevTools
WebPageTest

Gunakan URL yang setara.

Contohnya:

Website A:
/artikel/contoh-artikel/

Website B:
/artikel/contoh-artikel/

Contoh Tabel Hasil Pengujian

Penting: angka di bawah adalah contoh format studi kasus, bukan hasil pengukuran universal. Untuk artikel yang benar-benar dipublikasikan sebagai pengalaman pribadi, ganti dengan hasil pengujian website Anda sendiri.

Parameter	WordPress biasa	Headless + Vercel
Performance	78	94
LCP	2,8 detik	1,4 detik
INP	180 ms	120 ms
CLS	0,08	0,03
Total Page Size	1,8 MB	1,1 MB
Request	62	34

Dari contoh tersebut terlihat bahwa Headless dapat memberikan peningkatan performa.

Namun, peningkatan tersebut bukan semata-mata karena menggunakan Vercel.

Frontend Next.js yang lebih sederhana, caching, optimasi gambar, pengurangan plugin frontend, dan strategi rendering juga berpengaruh.

Cara Melakukan Pengujian Sendiri

Setelah website berhasil online, buka:

Google PageSpeed Insights

Masukkan URL website.

Lakukan pengujian minimal:

Mobile
Desktop

Sebaiknya lakukan beberapa kali dan jangan hanya mengambil satu hasil pengujian.

Catat:

Performance
LCP
INP
CLS
FCP
TBT
Speed Index

Kemudian masukkan hasilnya ke tabel.

Jangan Hanya Mengejar Skor 100

Ini kesalahan yang cukup sering saya lihat ketika membahas optimasi website.

Skor Lighthouse atau PageSpeed bukan tujuan akhir.

Yang lebih penting adalah pengalaman pengguna sebenarnya.

Misalnya:

Performance: 96

belum tentu website terasa cepat jika:

gambar terlalu besar,
konten utama muncul terlambat,
JavaScript berat,
iklan terlalu banyak,
layout berpindah-pindah,
server API lambat.

Sebaliknya, website dengan skor sedikit lebih rendah bisa saja terasa sangat cepat bagi pengunjung.

Karena itu, gunakan skor sebagai alat diagnosis, bukan sebagai satu-satunya target.

Kelebihan Headless WordPress + Vercel

1. Frontend lebih fleksibel

Anda tidak lagi dibatasi oleh struktur theme WordPress.

Frontend dapat dibuat menggunakan:

Next.js
React
TypeScript
Tailwind CSS

dan teknologi frontend lainnya.

2. Deployment lebih praktis

Dengan repository GitHub yang terhubung, perubahan kode dapat memicu deployment otomatis.

Vercel juga menyediakan Preview Deployment untuk perubahan branch atau pull request sehingga developer dapat menguji perubahan sebelum masuk production.

3. Bisa memanfaatkan CDN

Next.js dapat menggunakan static generation sehingga halaman dapat diprerender dan didistribusikan melalui CDN Vercel.

Ini sangat menarik untuk website yang memiliki banyak halaman konten yang tidak berubah setiap detik.

4. WordPress tetap nyaman digunakan

Editor konten masih menggunakan WordPress.

Jadi penulis tidak perlu belajar React atau Next.js hanya untuk membuat artikel.

Mereka tetap membuka:

domainanda.com/wp-admin

dan menulis artikel seperti biasa.

Kekurangan Headless WordPress

Headless juga memiliki konsekuensi.

1. Lebih kompleks

WordPress biasa:

WordPress → Website

Headless:

WordPress
    ↓
REST API
    ↓
Next.js
    ↓
Vercel
    ↓
Website

Semakin banyak komponen, semakin banyak hal yang harus dipahami.

2. Plugin WordPress tidak otomatis bekerja di frontend

Ini salah satu perbedaan terbesar.

Misalnya sebuah plugin WordPress mengubah tampilan halaman menggunakan PHP atau shortcode.

Pada Headless WordPress, perubahan tersebut tidak otomatis muncul di frontend Next.js.

Data dari plugin mungkin perlu:

REST API endpoint,
custom API,
GraphQL,
atau integrasi khusus.

3. Preview artikel membutuhkan perhatian khusus

Pada WordPress biasa, draft dan preview relatif sederhana.

Pada Headless, kita perlu membuat mekanisme agar Next.js dapat mengambil konten preview secara aman.

Untuk website editorial besar, bagian ini harus dirancang sejak awal.

Bagaimana dengan SEO?

Headless WordPress tidak otomatis lebih SEO-friendly.

SEO tetap bergantung pada implementasi frontend.

Pastikan Next.js menghasilkan:

<title>...</title>
<meta name="description">
<link rel="canonical">

serta:

heading yang benar,
structured data,
sitemap,
robots.txt,
Open Graph,
Twitter/X metadata,
internal linking,
URL yang konsisten,
halaman 404,
redirect,
breadcrumbs.

Untuk website berbasis konten, jangan lupa bahwa Google tetap harus dapat menemukan dan memahami halaman yang dihasilkan frontend.

Bagaimana dengan Sitemap?

Pada WordPress tradisional, sitemap biasanya disediakan WordPress atau plugin SEO.

Dalam arsitektur Headless, Anda harus memastikan sitemap yang digunakan sesuai dengan URL frontend.

Misalnya frontend berada di:

https://www.domain.com

maka sitemap idealnya juga menggambarkan URL:

https://www.domain.com/artikel/contoh/

bukan URL frontend WordPress yang tidak digunakan pengunjung.

Apakah WordPress Bisa Tetap Menggunakan Plugin SEO?

Bisa, tetapi perlu memahami batasannya.

Plugin SEO pada WordPress dapat membantu mengelola metadata atau data SEO di sisi CMS.

Tetapi frontend Next.js harus benar-benar mengambil dan menerapkan data tersebut.

Dengan kata lain:

Plugin SEO
     ↓
WordPress
     ↓
API
     ↓
Next.js
     ↓
HTML

Jangan berasumsi bahwa memasang plugin SEO otomatis membuat frontend Headless memiliki metadata yang sama.

Apakah Vercel Gratis Selamanya?

Vercel saat ini menyediakan paket Hobby dengan harga $0/bulan. Paket tersebut ditujukan untuk personal project dan penggunaan yang sesuai dengan ketentuan paketnya.

Jadi istilah "gratis" sebaiknya tidak diartikan sebagai:

Tidak ada batas penggunaan apa pun.

Tetap ada limit dan ketentuan penggunaan.

Untuk website bisnis dengan traffic besar atau kebutuhan operasional profesional, periksa kembali pricing dan batas terbaru sebelum menentukan arsitektur production.

Apakah WordPress-nya Juga Gratis?

Tidak otomatis.

Ini sering disalahpahami.

Vercel dapat menjadi tempat frontend Next.js berjalan, tetapi WordPress tetap membutuhkan tempat untuk menjalankan:

PHP,
database,
WordPress,
media,
plugin,
REST API.

Jadi arsitekturnya bisa saja:

WordPress
↓
Hosting biasa

Next.js
↓
Vercel

Dalam skenario tersebut, yang gratis adalah bagian deployment frontend di Vercel sesuai batas paket Hobby.

Hosting WordPress tetap memiliki biaya jika menggunakan hosting berbayar.

Apakah Headless WordPress Cocok untuk Website Kecil?

Menurut saya, belum tentu.

Untuk website:

company profile sederhana,
blog pribadi,
website UMKM,
landing page sederhana,

WordPress biasa sering lebih masuk akal.

Headless mulai menarik ketika kebutuhan frontend sudah lebih kompleks.

Misalnya:

WordPress CMS
+
Next.js
+
Custom UI
+
High performance
+
API integration
+
Multiple frontend

Jika kebutuhan Anda hanya:

Artikel
Halaman
Kontak
Galeri

WordPress biasa kemungkinan lebih efisien dari sisi pengelolaan.

Checklist Sebelum Production

Sebelum website Headless WordPress benar-benar digunakan, saya menyarankan mengecek:

WordPress

Next.js

Vercel

SEO

Kesimpulan

Membangun Headless WordPress dengan Next.js dan Vercel sebenarnya tidak sesulit yang dibayangkan.

Konsep dasarnya sederhana:

WordPress
    ↓
REST API
    ↓
Next.js
    ↓
Vercel
    ↓
Pengunjung

WordPress menangani konten, sedangkan Next.js menangani tampilan.

Vercel kemudian menjadi tempat frontend Next.js di-deploy dan dapat menyediakan deployment berbasis Git, Preview Deployment, serta distribusi frontend melalui infrastrukturnya.

Tetapi ada satu hal yang menurut saya lebih penting daripada sekadar mengatakan "Headless lebih cepat".

Arsitektur harus disesuaikan dengan kebutuhan.

Kalau kebutuhan website sederhana, WordPress biasa mungkin masih merupakan pilihan paling praktis.

Namun jika Anda membutuhkan frontend modern, performa tinggi, kontrol penuh terhadap UI, integrasi API, dan workflow deployment berbasis Git, Headless WordPress + Next.js + Vercel menjadi kombinasi yang sangat menarik untuk dicoba.

Dan yang paling penting, jangan hanya percaya pada klaim performa.

Ukur sendiri.

Bandingkan website WordPress biasa dengan frontend Headless menggunakan URL, konten, gambar, dan kondisi pengujian yang sama. Dari sana baru bisa terlihat apakah perpindahan arsitektur memang memberikan manfaat untuk website yang Anda bangun.

Cara Deploy WordPress Headless ke Vercel Secara Gratis: Panduan Lengkap + Studi Kasus Loading

Apa Itu Headless WordPress?

Kapan Headless WordPress Layak Digunakan?

Cocok untuk:

Persiapan Sebelum Deploy

1. Siapkan WordPress

2. Tes Endpoint Artikel WordPress

3. Instal Node.js

4. Buat Project Next.js

5. Hubungkan Next.js dengan WordPress

6. Buat Fungsi Mengambil Artikel

7. Tampilkan Artikel di Homepage

8. Buat Repository GitHub

9. Deploy ke Vercel

10. Konfigurasi Project

11. Masukkan Environment Variable

12. Klik Deploy

13. Hubungkan Custom Domain

14. Bagaimana WordPress dan Vercel Bekerja Setelah Deployment?

Studi Kasus: Apakah Headless WordPress Benar-Benar Lebih Cepat?

Metode Pengujian

Website A

Website B

Contoh Tabel Hasil Pengujian

Cara Melakukan Pengujian Sendiri

Jangan Hanya Mengejar Skor 100

Kelebihan Headless WordPress + Vercel

1. Frontend lebih fleksibel

2. Deployment lebih praktis

3. Bisa memanfaatkan CDN

4. WordPress tetap nyaman digunakan

Kekurangan Headless WordPress

1. Lebih kompleks

2. Plugin WordPress tidak otomatis bekerja di frontend

3. Preview artikel membutuhkan perhatian khusus

Bagaimana dengan SEO?

Bagaimana dengan Sitemap?

Apakah WordPress Bisa Tetap Menggunakan Plugin SEO?

Apakah Vercel Gratis Selamanya?

Apakah WordPress-nya Juga Gratis?

Apakah Headless WordPress Cocok untuk Website Kecil?

Checklist Sebelum Production

WordPress

Next.js

Vercel

SEO

Kesimpulan

Menu Halaman Statis