Panduan Dekopling CMS Warisan: Strategi Migrasi Drupal dan WordPress ke Headless Next.js

Banyak portal web korporat dan media informasi bisnis di Indonesia dibangun di atas Content Management System (CMS) monolitik seperti WordPress atau Drupal. Seiring berjalannya waktu, tumpukan plugin pihak ketiga, tema warisan yang tidak teroptimasi, dan database SQL yang terbebani kueri kompleks menghasilkan dua masalah kronis: skor Core Web Vitals yang buruk dan kerentanan keamanan yang tinggi terhadap injeksi kode atau brute-force login.

Namun, membuang CMS monolitik secara total sering kali ditentang oleh tim konten dan editorial yang sudah terbiasa dengan antarmuka penulisan grafis (WYSIWYG) dan alur penerbitan yang matang.

Solusi arsitektur terbaik adalah decoupling (pendekopelan): mempertahankan CMS monolitik hanya sebagai mesin pengelolaan konten di balik firewall (headless backend), sementara antarmuka publik digantikan sepenuhnya oleh aplikasi frontend modern berbasis Next.js.

Keuntungan Dekopel Arsitektur: Keamanan dan Performa #

Pendekatan decoupled memutus hubungan langsung antara pengunjung publik dan database inti CMS:

1. Eliminasi Celah Injeksi Web Publik: Pengunjung situs hanya berinteraksi dengan aset HTML/JS statis yang disajikan dari jaringan edge CDN. Kerentanan plugin PHP atau direktori /wp-admin tidak dapat diakses langsung dari internet umum.
2. Skor Performa Lighthouse 100: Halaman dirender sebelumnya (pre-rendered) menggunakan Static Site Generation (SSG) dan Incremental Static Regeneration (ISR). Latensi halaman turun dari 2.500 milidetik menjadi di bawah 150 milidetik (TTFB instan).
3. Pemberdayaan Tim Redaksi: Penulis tetap membuat draf, mengunggah foto, dan menjadwalkan artikel menggunakan dashboard WordPress atau Drupal yang sudah familiar tanpa perlu mempelajari tools baru.

Arsitektur Monolitik Lama (Rentan & Lambat):
Pengguna Publik ────> Apache/PHP + Puluhan Plugin ────> MySQL (Query Lambat)
                     *Risiko Peretasan wp-admin & SQL Injection*

Arsitektur Headless Modern (Aman & Sub-Detik):
Pengguna Publik ────> Cloudflare Edge / Next.js SSG (HTML Statis <100ms)
                             ▲
                             │ (Webhook saat artikel publish)
Tim Redaksi ────> [WordPress Private / Headless] ────> Database Terisolasi
                  *Akses Dibatasi VPN / Cloudflare Access*

Menyiapkan WordPress atau Drupal sebagai Headless Content Engine #

Langkah pertama adalah mengubah konfigurasi CMS agar berfungsi murni sebagai penyedia REST API atau GraphQL:

1. Konfigurasi Endpoint REST API WordPress #

Aktifkan Application Passwords bawaan WordPress untuk autentikasi API yang aman. Nonaktifkan rendering tema publik dengan mengarahkan seluruh request root ke endpoint API atau halaman kosong:

// Tambahkan pada file functions.php atau mu-plugins WordPress
// Mencegah pengunjung mengakses tema frontend warisan
add_action('template_redirect', function () {
    if (!is_admin() && !defined('REST_REQUEST')) {
        wp_redirect('/wp-json/', 301);
        exit;
    }
});

// Mengekspos field metadata kustom ke dalam endpoint REST API /wp-json/wp/v2/posts
add_action('rest_api_init', function () {
    register_rest_field('post', 'seo_metadata', [
        'get_callback' => function ($post_arr) {
            return [
                'meta_title' => get_post_meta($post_arr['id'], '_meta_title', true),
                'meta_desc' => get_post_meta($post_arr['id'], '_meta_desc', true),
                'canonical_url' => get_permalink($post_arr['id']),
            ];
        },
        'schema' => null,
    ]);
});

2. Konfigurasi JSON:API pada Drupal #

Pada Drupal, modul inti JSON:API menyediakan endpoint otomatis berstandar industri untuk seluruh entitas tipe konten, taksonomi, dan relasi media tanpa memerlukan plugin tambahan.

Arsitektur Konsumsi Data pada Next.js App Router #

Di sisi Next.js, buat lapisan abstraksi (API Client) yang mengambil data dari CMS headless pada saat build time, serta menangani revalidasi saat artikel baru diterbitkan:

// frontend/lib/cms-client.ts
const CMS_API_URL = process.env.CMS_HEADLESS_URL || 'https://backend-cms.internal.puluhlabs.com/wp-json/wp/v2';

export interface CMSArticle {
  id: number;
  slug: string;
  title: string;
  content: string;
  excerpt: string;
  featuredImage: string;
  publishedAt: string;
}

export async function getArticleBySlug(slug: string): Promise<CMSArticle | null> {
  try {
    const res = await fetch(`${CMS_API_URL}/posts?slug=${slug}&_embed`, {
      headers: {
        'Authorization': `Basic ${Buffer.from(process.env.CMS_AUTH_CREDENTIALS || '').toString('base64')}`,
      },
      next: { tags: [`article-${slug}`], revalidate: 86400 }, // Cache 24 jam dengan tag revalidasi
    });

    if (!res.ok) return null;
    const posts = await res.json();
    if (!posts || posts.length === 0) return null;

    const raw = posts[0];
    return {
      id: raw.id,
      slug: raw.slug,
      title: raw.title.rendered,
      content: raw.content.rendered,
      excerpt: raw.excerpt.rendered.replace(/<[^>]+>/g, '').trim(),
      featuredImage: raw._embedded?.['wp:featuredmedia']?.[0]?.source_url || '/img/default-thumbnail.webp',
      publishedAt: raw.date,
    };
  } catch (error) {
    console.error(`Gagal mengambil artikel slug: ${slug}`, error);
    return null;
  }
}

Revalidasi Otomatis Menggunakan Route Handler Webhook #

Agar perubahan artikel yang dilakukan redaksi di WordPress langsung tampil di situs publik dalam hitungan detik tanpa harus melakukan build ulang seluruh situs, buat Route Handler revalidasi pada Next.js:

// app/api/revalidate/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { revalidateTag, revalidatePath } from 'next/cache';

export async function POST(request: NextRequest) {
  const secret = request.nextUrl.searchParams.get('secret');

  // Validasi shared secret webhook
  if (secret !== process.env.REVALIDATION_SECRET) {
    return NextResponse.json({ message: 'Secret token tidak valid' }, { status: 401 });
  }

  const payload = await request.json().catch(() => ({}));
  const slug = payload?.post_slug;

  if (slug) {
    // Revalidasi tag spesifik artikel dan daftar blog utama
    revalidateTag(`article-${slug}`);
    revalidatePath(`/blog/${slug}`);
    revalidatePath('/blog');
    return NextResponse.json({ revalidated: true, slug, timestamp: Date.now() });
  }

  // Jika tidak ada slug, revalidasi seluruh halaman blog
  revalidatePath('/blog');
  return NextResponse.json({ revalidated: true, general: true, timestamp: Date.now() });
}

Pada CMS WordPress, pasang hook action save_post atau plugin webhook sederhana yang memicu POST /api/revalidate?secret=RAHASIA setiap kali artikel disimpan atau diterbitkan.

Checklist Evaluasi Pasca-Migrasi #

1. Pemetaan URL 1:1 dan Canonical Tag: Pastikan struktur URL permalink di Next.js identik dengan struktur lama di WordPress untuk mencegah rusaknya tautan rujukan dan hilangnya ranking SEO.
2. Sanitasi Konten HTML: Gunakan parser HTML di sisi server (seperti cheerio atau sanitize-html) untuk membersihkan tag skrip inline usang atau styling absolut bawaan editor WYSIWYG lama.
3. Penyimpanan Gambar di CDN Terpisah: Aset media gambar dialihkan ke Object Storage (seperti S3 atau Cloudflare R2) dengan kompresi WebP otomatis untuk membebaskan beban storage server CMS.
4. Isolasi Dashboard CMS: Akses dashboard manajemen CMS dilindungi menggunakan Cloudflare Zero Trust Access atau VPN internal, sehingga tidak dapat dipindai oleh bot peretas publik.