Fondasi headless yang selesai dalam 21 hari

Apa yang Anda dapat dengan Rp 5 juta

Brief Anda mencakup dua website, sepuluh jenis konten, multilingual, structured data, keamanan, Core Web Vitals, dan integrasi CRM. Cakupan sebesar itu realistisnya butuh beberapa bulan kerja.

Jadi yang saya tawarkan di sini adalah bagian yang bisa saya selesaikan tuntas dalam 21 hari: website pertama Anda, live di produksi, dengan seluruh fondasi teknisnya sudah terpasang. Sisanya saya pecah jadi modul dengan harga masing-masing di bagian 08, supaya Anda bisa mengambilnya kapan anggarannya siap.

Yang saya bawa ke proyek ini

Sebelum menulis penawaran, saya membangun implementasi referensi untuk arsitektur yang Anda minta. Isinya dua aplikasi Next.js, sepuluh jenis konten, plugin WordPress headless, ISR dengan webhook revalidation, sitemap terpecah dengan hreflang, dan JSON-LD yang diambil langsung dari CMS. Anda bisa menjalankannya sendiri dengan tiga perintah.

Di dalamnya ada skrip verifikasi yang menyalakan kedua server, mengambil halaman tanpa menjalankan JavaScript sama sekali, lalu memeriksa 181 hal: H1, isi tabel spesifikasi, canonical, hreflang, JSON-LD, sitemap, robots, redirect, dan security header. Jadi klaim "HTML siap di-crawl" di penawaran ini bisa Anda buktikan sendiri.

Skrip itu juga menemukan tiga bug di kode saya sendiri saat demo dibangun, salah satunya middleware yang diam-diam mematikan webhook publish. Saya sebutkan karena begitulah cara saya bekerja: verifikasi otomatis masuk ke dalam scope, bukan jadi tambahan.

Karena fondasi itu sudah ada dan sudah teruji, waktu 21 hari bisa langsung dipakai untuk model konten dan halaman Anda.

Satu hal yang perlu saya sampaikan di awal

Sebagai gantinya saya membangun implementasi referensi tadi, dan membuatnya bisa Anda periksa sendiri tanpa perlu percaya pada kata-kata saya.

Kalau pengalaman produksi headless WordPress memang syarat mutlak buat Anda, saya paham sepenuhnya. Kalau yang Anda nilai adalah cara berpikir, keputusan arsitektur, dan kualitas implementasi, bahan penilaiannya sudah bisa dibuka hari ini juga.

Yang masuk 21 hari, dan yang menyusul

Batasnya saya tulis di penawaran supaya jelas sejak awal. Kalau ada baris di kolom kanan yang menurut Anda wajib ada di rilis pertama, sampaikan saja. Kita bisa tukar dengan sesuatu di kolom kiri.

Portofolio

Implementasi referensi untuk brief ini

Monorepo berisi dua aplikasi Next.js 15 (App Router, React 19, TypeScript) di atas WordPress headless, dengan dua brand demo: Verdano Materials untuk sisi komersial dan Fiberline Review untuk knowledge center. Konten demonya sengaja dipilih yang sulit: tabel properti berikut metode ujinya, data sertifikat dengan nomor yang bisa diverifikasi, dokumen teknis dengan revisi dan reviewer, serta relasi konten yang menyeberang antar domain.

git clone https://github.com/nugrohosetiaji91-png/headless-wp-nextjs-b2b.git
cd headless-wp-nextjs-b2b
npm install
npm run build
npm run verify:ssr

=== Website A ===
=== Website B ===
=== Sitemap, robots, redirect ===
181/181 checks passed.

Proyek lain

Bukan headless WordPress, tapi menunjukkan cara kerja yang sama: model data yang dipikirkan matang, tes yang benar-benar dijalankan, dan produk yang sampai selesai.

• OmniStok. Aplikasi sales dan inventory dengan satu codebase Flutter untuk web, Android, dan desktop. Repo terbuka dan ada demo yang bisa diklik. Dibangun sebagai bukti kerja untuk klien, lalu diperbaiki mengikuti klarifikasi scope dari klien tersebut.
• LINI ERP. ERP manufaktur dengan React 19, TypeScript, dan Vite. 53 rute dan 18 laporan. Logika bisnisnya ditulis terpisah dari UI supaya bisa dipindah ke backend tanpa menyentuh tampilan. Saldo stok dihitung dari akumulasi mutasi, bukan angka yang disimpan begitu saja.
• Bot absensi multi-tenant. Bot Telegram dengan penjadwal, throttling pengiriman massal, dan penanganan rate limit. 63 tes hijau.

Arsitektur teknis

1. 1WordPress di subdomain sendiri (cms.domain.com), tanpa theme dan tanpa halaman publik. Request selain API diarahkan keluar.
2. 2REST API. Setiap response membawa satu objek platform yang sudah dirapikan: bahasa, website pemilik, translation group, SEO, relasi, dan daftar blok.
3. 3packages/cms. Satu-satunya lapisan yang tahu bentuk WordPress. Halaman tidak pernah menyentuh payload mentah ACF.
4. 4Next.js. Server Components dan ISR, dengan penanda cache per dokumen, per jenis konten, per kelompok bahasa, dan per sitemap.
5. 5CDN. HTML statis dari edge. Halaman yang belum pernah dirender dibuat saat request pertama, lalu ikut tersimpan di cache.

Saya memilih REST, bukan WPGraphQL, karena brief Anda menyebut REST dan karena WPGraphQL adalah plugin komunitas yang duduk di jalur kritis. Kalau nanti Anda ingin pindah, drivernya hanya satu file di balik interface.

Monorepo dipakai supaya dua website berbagi satu definisi canonical, satu pembangun hreflang, dan satu daftar event analytics. Kalau logika URL tersebar di dua tempat, canonical dan sitemap gampang berselisih.

• Next.js 15
• React 19
• TypeScript
• npm workspaces
• WordPress 6.5+
• ACF Pro
• Polylang / WPML
• Zod
• Vercel
• Cloudflare

Pendekatan CMS

Semua jenis konten dan field group didaftarkan lewat kode, bukan diklik lewat admin. Alasannya praktis: field group yang dibuat di UI hanya tersimpan di database, sehingga sulit direview, mudah berbeda antar environment, dan bisa tertimpa saat restore staging.

Editor tidak perlu menyusun layout. Mereka memilih dari palet blok yang sudah tersedia: hero, teks, tabel spesifikasi, tabel perbandingan, diagram proses, timeline, statistik, FAQ, CTA, related content, dan media. Masing-masing blok sudah tahu cara tampil responsif dan cara mengisi structured data-nya.

Relasi antar konten inilah yang menyatukan dua website. Editor cukup memilih konten terkait di WordPress, lalu sistem yang menentukan apakah tautannya relatif atau lintas domain, memberi label, dan mengirim event analytics. Tidak ada URL lintas domain yang perlu diketik manual.

Pendekatan SEO

Semua canonical, hreflang, entri sitemap, breadcrumb, dan tautan antar website dihasilkan oleh satu modul yang sama. Ini yang menjaga sitemap dan canonical tetap sepakat saat jumlah bahasa dan halaman bertambah.

Performa

Target Anda (LCP di bawah 2,5 detik, INP di bawah 200 ms, CLS di bawah 0,1) dikejar lewat keputusan arsitektur sejak awal. Semua blok adalah Server Component, jadi JavaScript yang dikirim ke browser sangat sedikit. Setiap gambar punya dimensi tetap untuk menjaga CLS, diformat AVIF atau WebP lewat next/image, dan embed video baru dimuat saat pengunjung mengkliknya.

GTM dimuat setelah interaksi pertama atau 1,2 detik setelah halaman selesai, mana yang lebih dulu. Ini menjaga LCP dan INP tetap aman tanpa kehilangan data analytics.

Alur publikasi

Editor tetap memakai alur yang sudah mereka kenal, dan tidak perlu tahu bahwa frontend-nya aplikasi terpisah.

1. 1Editor menulis di WordPress dan menekan Preview. Tombolnya mengarah ke link bertanda tangan menuju frontend.
2. 2Frontend membuka draft mode dan membaca draft tanpa menyimpannya ke cache, jadi draft tidak pernah bocor ke pengunjung.
3. 3Reviewer teknis menyetujui. Ada status menunggu review antara draft dan publish, khusus untuk konten yang memuat data teknis.
4. 4Editor menekan Publish. WordPress mengirim webhook bertanda tangan HMAC-SHA256.
5. 5Frontend membatalkan empat penanda cache saja: dokumen itu, jenis kontennya, kelompok bahasanya, dan sitemap.
6. 6Request berikutnya merender ulang halaman itu saja. Tanpa deploy, tanpa build ulang.

Webhook dikirim lewat cron satu detik, bukan langsung, supaya frontend yang sedang lambat tidak membuat tombol Publish menggantung. Kalau pengirimannya gagal, notifikasi muncul di admin WordPress supaya ketahuan hari itu juga.

Rekomendasi deployment

Kalau kebijakan Anda mengharuskan semuanya berada di infrastruktur sendiri, saya bisa mengerjakannya di VPS dengan Node dan shared cache handler. Silakan sampaikan, nanti saya sesuaikan estimasinya.

Timeline 21 hari

Hari 1 sampai 3 menghasilkan dokumen yang perlu Anda setujui lebih dulu. Checkpoint ini yang paling menentukan, karena perubahan model konten jauh lebih murah di hari kedua daripada di minggu ketiga.

Proposal komersial

Angka ini saya letakkan di tengah rentang anggaran Anda, bukan di batas atasnya. Alasannya sederhana: ini proyek pertama saya di platform ini, jadi saya belum punya rekam jejak yang bisa Anda cek di sini. Harga di tengah terasa lebih pantas untuk posisi itu.

Yang membuatnya tetap masuk akal dari sisi saya, fondasi arsitekturnya sudah dibangun dan diuji sebelum penawaran ini ditulis, jadi 21 hari penuh bisa dipakai untuk website Anda.

Peta biaya untuk sisa brief

Bagian ini bukan sesuatu yang perlu Anda putuskan sekarang. Tujuannya supaya Anda punya angka nyata saat menyusun anggaran tahap berikutnya. Tiap modul berdiri sendiri dan bisa diambil dalam urutan apa pun.

Permintaan di luar cakupan yang tertulis di bagian Scope dihitung Rp 200.000 per jam, selalu diestimasi dan disetujui lebih dulu.

Jawaban skenario technical test

"Sebuah artikel baru diterbitkan melalui WordPress Headless CMS. Bagaimana Anda memastikan halaman tersebut tersedia dalam bentuk SEO-friendly HTML di Next.js, sitemap diperbarui, metadata dan structured data tersedia, serta frontend dapat diperbarui tanpa melakukan full rebuild seluruh website?"

Inilah yang sudah berjalan di implementasi referensi, jadi jawabannya bisa saya tunjukkan, bukan hanya diceritakan.

Saat editor menekan Publish, hook transition_post_status menyala di plugin. WordPress tahu persis apa yang berubah: jenis konten, slug, bahasa, dan translation group.

Plugin mengirim webhook ke frontend, ditandatangani HMAC-SHA256 atas isi request. Pengirimannya lewat cron satu detik supaya tidak menahan editor.

Frontend memverifikasi tanda tangannya, lalu membatalkan empat penanda cache: dokumen itu sendiri, jenis kontennya (karena halaman daftar ikut berubah), kelompok bahasanya (supaya hreflang tetap benar), dan sitemap. Ribuan halaman lain tidak tersentuh.

Request berikutnya merender ulang halaman itu saja. Slug yang belum ada saat build terakhir pun tetap dirender pada request pertama, lalu ikut tersimpan di cache. Tidak ada deploy, tidak ada build ulang.

Sitemap adalah route, bukan file hasil build, jadi ia ikut diperbarui oleh penanda yang sama dan URL barunya bisa ditemukan crawler dalam hitungan detik. Sitemap untuk jenis konten lain tidak ikut diregenerasi.

Metadata dan JSON-LD dibangun dari dokumen yang sama dengan yang dirender halaman. Judul, deskripsi, canonical, hreflang, Article, BreadcrumbList, dan FAQPage semuanya berasal dari satu sumber, jadi isinya tidak bisa berbeda dari yang tampil di layar.

Waktu dari Publish sampai HTML siap diindeks: hitungan detik, dengan biaya satu render halaman.

Langkah berikutnya

Saya bisa mengirim akses ke implementasi referensi supaya tim teknis Anda menjalankannya sendiri. Tiga perintah, tanpa perlu WordPress dan tanpa kredensial.

Kalau kita lanjut, ada empat hal yang saya butuhkan sebelum hari pertama:

1. Konfirmasi website mana yang dibangun lebih dulu. Saya menyarankan commercial site, karena itu yang menghasilkan inquiry.
2. Daftar bahasa yang direncanakan. Strukturnya saya siapkan untuk semuanya sejak awal walau baru satu yang terisi, karena memasangnya di awal jauh lebih murah daripada mengubah struktur URL nanti.
3. Akses ke website lama kalau ada. Peta redirect masuk fase lanjutan, tapi saya perlu tahu sejak awal supaya struktur URL-nya tidak menyulitkan migrasi.
4. Konten untuk minimal 5 produk dan 3 artikel, atau konfirmasi bahwa boleh memakai konten sementara di rilis pertama.

Terima kasih sudah menulis brief sedetail ini. Dokumen sejelas itu membuat estimasi jadi jauh lebih jujur, dan itu jarang.