Panduan Lengkap WordPress Headless dengan Next.js untuk Pemula

WordPress Headless adalah arsitektur di mana WordPress hanya digunakan sebagai backend/CMS untuk mengelola konten, sementara frontend ditampilkan menggunakan framework modern seperti Next.js.

Apa itu WordPress Headless?

Dalam arsitektur tradisional, WordPress menangani semuanya: database, logika bisnis, dan tampilan (theme PHP). Dengan Headless, kita memisahkan dua bagian ini:

Backend: WordPress mengelola konten, media, kategori, dan menyediakan data via REST API
Frontend: Next.js mengambil data dari API dan merender halaman web yang cepat dan modern

Diagram arsitektur WordPress Headless — *Arsitektur WordPress Headless: WP sebagai backend, Next.js sebagai frontend*

Kenapa Memilih WordPress Headless?

Ada beberapa keuntungan utama dari pendekatan ini:

Performa: Next.js dengan SSR/SSG jauh lebih cepat dari tema PHP tradisional
Keamanan: WordPress admin tidak terekspos ke publik
Developer Experience: Bisa pakai React, TypeScript, Tailwind CSS
SEO: Kontrol penuh atas meta tags, structured data, dan performance
Fleksibilitas: Bisa ganti frontend kapan saja tanpa pindah konten

Developer coding dengan Next.js — *Next.js App Router memudahkan pembuatan halaman dinamis*

Langkah Setup

1. Install WordPress dengan Docker

Buat file docker-compose.yml dengan konfigurasi MySQL dan WordPress:

services:
  db:
    image: mysql:8.0
    environment:
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wp
      MYSQL_PASSWORD: wppass

  wordpress:
    image: wordpress:latest
    ports:
      - "8123:80"
    depends_on:
      - db

Jalankan dengan docker compose up -d, lalu akses di https://wbkind.com.

2. Setup Next.js Project

Buat project Next.js baru dengan TypeScript dan Tailwind:

npx create-next-app@latest frontend --typescript --tailwind

3. Fetch Data dari WP REST API

Buat file lib/wp.ts untuk berkomunikasi dengan WordPress:

export const WP_REST_API = "https://wbkind.com/wp-json/wp/v2";

export async function getPosts() {
  const res = await fetch(`${WP_REST_API}/posts?_embed=true`);
  return res.json();
}

Hasil Akhir

Dengan setup ini, kamu punya blog yang super cepat dengan kemudahan WordPress sebagai CMS. Setiap artikel yang ditulis di WP Admin akan otomatis muncul di frontend Next.js.