Tantangan
Jefrey Barber, sebuah brand perawatan diri yang berbasis di Republik Ceko, memiliki situs web berkinerja tinggi yang dibangun di atas Jekyll. Meskipun situs tersebut cepat, terdapat hambatan operasional utama: pembaruan konten memerlukan bantuan developer.
Sebagai brand di industri perawatan diri yang bergerak cepat, tim perlu memperbarui detail produk, memublikasikan tips blog, dan mengubah copy landing page secara sering. Alur kerja yang ada—mengedit file Markdown mentah dan memicu komitmen Git—terlalu teknis dan lambat untuk tim pemasaran mereka. Mereka membutuhkan kinerja situs statis tetapi dengan kemudahan penggunaan website builder visual.
Proses
Kami melakukan migrasi strategis ke Next.js, mempertahankan kecepatan situs sambil memperkenalkan alur kerja penyuntingan konten modern.
Migrasi: Jekyll ke Next.js
Kami memindahkan basis kode yang ada dari Jekyll (berbasis Ruby) ke Next.js (berbasis React). Transisi ini memungkinkan kami beralih dari template Liquid yang kaku ke arsitektur berbasis komponen.
- Mempertahankan SEO: Kami memetakan semua URL yang ada dengan cermat untuk memastikan tidak ada ekuitas tautan (link equity) yang hilang selama migrasi.
- Modern Styling: Kami memfaktorkan ulang CSS ke dalam Tailwind CSS, membuat sistem desain lebih mudah dikelola dan responsif.
Memberdayakan Klien dengan Tina CMS
Inti dari transformasi ini adalah integrasi Tina CMS. Tidak seperti headless CMS tradisional yang memisahkan konten dari kode, Tina memungkinkan Contextual Editing.
- Visual Editing: Klien sekarang dapat mengedit teks, menukar gambar, dan mengatur ulang blok halaman langsung di layar, melihat perubahan secara real-time sebelum menerbitkannya.
- Git-Backed Content: Meskipun menggunakan antarmuka visual, semua konten tetap disimpan sebagai Markdown/JSON di repositori Git, menjaga keamanan dan manfaat kontrol versi dari JAMstack.
Landing Page Konversi Tinggi
Dengan infrastruktur React yang baru, kami membangun landing page dinamis yang dirancang untuk konversi. Kami menggunakan App Router Next.js untuk menyajikan gambar yang dioptimalkan dan elemen interaktif yang menampilkan produk perawatan diri secara hidup tanpa memperlambat halaman.
Hasil
Migrasi ini berhasil menjembatani kesenjangan antara kinerja developer dan otonomi pemasar.
- 100% Otonomi Klien – Tim pemasaran sekarang mengelola seluruh situs melalui Tina CMS tanpa menulis satu baris kode pun.
- Kecepatan Iterasi yang Meningkat – Eksperimen landing page dan pembaruan konten terjadi dalam hitungan menit, bukan hari.
- Arsitektur Masa Depan – Pindah ke Next.js membuka pintu untuk integrasi e-commerce masa depan (seperti Shopify atau Stripe) yang sebelumnya sulit diimplementasikan di Jekyll.