CMS WordPress Headless dengan Next.js, ACF & Arsitektur Komponen yang Dapat Digunakan Kembali

Kami membangun arsitektur WordPress headless + Next.js menggunakan Advanced Custom Fields (ACF) sebagai lapisan pemodelan konten yang fleksibel, sistem komponen yang dapat digunakan kembali di frontend, dan optimasi SEO otomatis secara menyeluruh.

Arsitektur

• CMS: WordPress (headless) dengan ACF Pro untuk pemodelan konten terstruktur
• Lapisan API: WPGraphQL + WPGraphQL for ACF untuk mengekspos konten bertipe melalui GraphQL
• Frontend: Next.js dengan App Router, React Server Components, TypeScript
• Styling: Tailwind CSS untuk styling yang utility-first, selaras dengan design system
• SEO: Next.js Metadata API, data terstruktur JSON-LD, pembuatan sitemap otomatis
• Hosting: Vercel (frontend) + managed WordPress hosting (CMS)
• Media: Optimasi Gambar Next.js dengan pustaka media WordPress sebagai sumber

Pemodelan Konten dengan ACF

Bidang Konten Fleksibel

Bidang Konten Fleksibel ACF memungkinkan editor untuk menyusun halaman dari blok konten yang sudah ditentukan. Setiap blok memetakan langsung ke komponen React di frontend, mencakup pola umum seperti bagian hero, grid fitur, carousel testimoni, CTA, akordion FAQ, penghitung statistik, tata letak gambar-teks, sematan video, tabel harga, dan feed blog.

Bidang Repeater & Grup

• Bidang Repeater untuk daftar (anggota tim, item portofolio, entri linimasa)
• Bidang Grup untuk data bertingkat terstruktur (blok alamat, tautan sosial, penggantian SEO)
• Bidang Hubungan untuk menautkan post, halaman, dan custom post type
• Halaman Opsi untuk pengaturan global (header, footer, tautan sosial, warna merek)

Arsitektur Komponen yang Dapat Digunakan Kembali

Prinsip Desain Komponen

Frontend mengikuti arsitektur modular dengan lapisan yang berbeda:

• Komponen Blok — Satu komponen React per blok Konten Fleksibel ACF
• Komponen UI Primitif — Elemen yang dapat digunakan kembali seperti tombol, kartu, dan lencana
• Komponen Tata Letak — Header, footer, navigasi, dan pembungkus kontainer
• Komponen SEO — Generator skema dan utilitas meta tag

Pola Block Resolver

Sebuah resolver pusat memetakan jenis blok ACF ke komponen React, memungkinkan editor untuk menyusun halaman tanpa keterlibatan pengembang:

1. Editor WordPress memilih blok dari dropdown dan mengisi bidang
2. WPGraphQL mengekspos halaman sebagai JSON terstruktur dengan jenis blok dan data bidang
3. Next.js mengambil data halaman pada waktu build (ISR) atau waktu permintaan (SSR)
4. Block resolver mengiterasi melalui array blok dan merender komponen React yang sesuai
5. Setiap komponen menerima data bidang ACF-nya sebagai typed props

Optimasi SEO

SEO Teknis

• Meta tag dinamis — Tag Title, description, Open Graph, dan Twitter Card yang dihasilkan per halaman dari data CMS
• URL Kanonis — Pembuatan tag kanonis otomatis mencegah duplikasi konten
• Pembuatan Sitemap — Sitemap XML dinamis dibangun dari data halaman/post WordPress pada waktu build
• robots.txt — Pembuatan secara terprogram dengan aturan yang sadar lingkungan
• Data Terstruktur — Skema JSON-LD untuk tipe Organisasi, Artikel, FAQ, BreadcrumbList, dan Produk

SEO Kinerja (Core Web Vitals)

• Generasi Statis (ISR) — Halaman dirender sebelumnya dan divalidasi ulang saat perubahan konten melalui webhook
• Optimasi Gambar — Konversi WebP/AVIF otomatis, lazy loading, srcset responsif
• Optimasi Font — Pemuatan font kustom tanpa pergeseran tata letak
• Pemisahan Kode — Pemisahan kode per rute otomatis dengan React Server Components
• Caching Edge — Jaringan edge global untuk TTFB di bawah 100ms

SEO Konten

• Bidang SEO per halaman — Title meta, deskripsi, dan penggantian gambar OG melalui custom fields
• Breadcrumbs — Navigasi breadcrumb yang dibuat otomatis dengan markup skema
• Penautan Internal — Bidang hubungan memungkinkan saran tautan internal terstruktur
• Penegakan Alt Text — Teks alternatif wajib pada semua bidang gambar

Alur Data WordPress-ke-Next.js

1. Perubahan Konten — Editor memublikasikan atau memperbarui konten di admin WordPress
2. Pemicu Webhook — WordPress memicu webhook ke endpoint revalidasi Next.js
3. Revalidasi ISR — Next.js meregenerasi hanya halaman yang terpengaruh
4. Invalidasi CDN — Halaman yang diperbarui disajikan dari edge dalam hitungan detik setelah diterbitkan

Fitur Utama

1. Visual Page Builder — Editor menyusun halaman dari blok ACF tanpa menyentuh kode
2. API Konten Bertipe — WPGraphQL + ACF menyediakan skema GraphQL bertipe penuh
3. Pustaka Komponen — 10+ blok yang dapat digunakan kembali mencakup semua pola halaman pemasaran umum
4. ISR + Webhooks — Pembaruan konten tercermin di situs langsung dalam hitungan detik
5. Otomatisasi SEO — Data terstruktur, sitemap, dan meta tag dihasilkan dari data CMS
6. Core Web Vitals — Gambar, font, dan pemisahan kode yang dioptimalkan untuk skor Lighthouse teratas
7. Mode Pratinjau — Tombol pratinjau WordPress menampilkan konten draf di frontend Next.js
8. Siap Multi-Bahasa — Integrasi ACF + WPML/Polylang untuk konten yang diinternasionalisasi