Next.js Error Hydration? Mungkin Ini Cara Anda Menangani Draf yang Salah

Bagi setiap pengelola konten, kemampuan untuk meninjau artikel yang belum terbit (draf) adalah sebuah kebutuhan. Namun, dalam pengalaman kami membangun IR Web dengan Next.js, upaya pertama kami untuk menciptakan fitur ini justru membuka 'kotak pandora' yang penuh dengan bug, error hidrasi, dan kegagalan build yang membuat frustrasi.

Kami belajar dengan cara yang sulit bahwa ada cara yang benar dan cara yang sangat salah untuk menangani draf.

Artikel ini adalah studi kasus transparan tentang bagaimana kami berevolusi dari pendekatan yang rapuh ke solusi yang aman dan stabil. Dan yang terpenting, kami akan membagikan "resep rahasia": bagaimana cara memberikan perintah yang tepat kepada partner AI Anda untuk membangun fitur ini tanpa mengulangi kesalahan kami.

Jebakan Berbahaya: Mencampur Logika Draf dan Terbit

Kesalahan fatal pertama kami, yang kami dokumentasikan dalam artikel Jebakan di Dunia Next.js, adalah mencoba mencampurkan logika untuk konten terbit dan konten draf di dalam satu alur kerja yang sama.

Pendekatan yang Salah (dan Mungkin Sedang Anda Lakukan):

• Membuat satu fungsi getArticles() yang bisa menerima parameter preview=true.
• Mencoba mengakses pratinjau draf melalui URL publik, misalnya .../blog/judul-artikel-draf?preview=true.

Pendekatan yang salah: mencampur logika di satu tempat menciptakan kode yang rapuh dan rentan error.

Mengapa ini Bencana?

1. Konflik Build: Proses next build mencoba membuat halaman statis untuk draf yang seharusnya tidak memiliki rute publik, menyebabkan build gagal.
2. Error Hidrasi: Ini adalah penyebab utama. Server merender halaman untuk publik, tetapi klien mencoba merender ulang untuk pratinjau, menyebabkan ketidakcocokan fatal yang terkenal: Text content does not match server-rendered HTML.
3. Kode yang Rumit: Komponen menjadi penuh dengan if (isPreview) { ... }, membuatnya sulit dipelihara dan rentan bug.

Solusi Aman: Isolasi Total sebagai Kunci Stabilitas

Setelah belajar dari kesalahan, kami mengadopsi prinsip yang sangat sederhana: draf dan konten terbit harus hidup di dua dunia yang terpisah.

Pendekatan yang benar: memisahkan total alur kerja untuk draf dan konten terbit.

Inilah cara kerja fitur peninjau draf kami sekarang yang terbukti stabil:

1. Fungsi Data Terpisah: Kami memiliki dua fungsi yang berbeda: getPublishedArticles() dan getUnpublishedArticles(). Satu hanya untuk konten terbit, satu lagi hanya untuk draf. Tidak ada tumpang tindih.
2. Rute Admin Terisolasi: Kami membuat halaman khusus di /admin/drafts. Halaman ini hanya memanggil getUnpublishedArticles(). Tidak ada halaman publik yang pernah menyentuh fungsi ini.
3. Tidak Ada Tautan Publik: Di halaman /admin/drafts, judul-judul draf ditampilkan sebagai teks biasa, bukan tautan. Ini mencegah proses build mencoba membuat halaman untuk mereka, sebuah langkah pencegahan yang krusial.

Hasilnya adalah sebuah "dasbor baca-saja" yang aman dan sama sekali tidak mengganggu stabilitas situs utama.

Cara Meminta Fitur Ini kepada AI Anda (Contoh Prompt)

Saat bekerja dengan AI seperti di Firebase Studio, kualitas hasil sangat bergantung pada kualitas perintah Anda. Jangan hanya berkata, "Buatkan saya halaman untuk melihat draf." Itu terlalu ambigu dan bisa mengarahkan AI ke pendekatan yang salah.

Gunakan perintah yang lebih cerdas dan spesifik yang menunjukkan bahwa Anda memahami risikonya.

Memberikan prompt yang jelas dan spesifik adalah kunci kolaborasi yang sukses dengan AI.

Contoh Prompt yang Tepat untuk AI:

"Hai, saya ingin bisa melihat daftar artikel yang statusnya published: false.

Berikut adalah persyaratan penting untuk menjaga stabilitas situs:

1. Buat halaman admin yang benar-benar terpisah di rute /admin/drafts. Halaman ini tidak boleh diindeks oleh mesin pencari.
2. Di dalam halaman tersebut, gunakan fungsi pengambilan data yang baru dan terpisah (getUnpublishedArticles()) yang secara eksplisit hanya mengambil artikel dengan published: false. Pastikan fungsi ini tidak digunakan di tempat lain di situs publik.
3. Di halaman /admin/drafts, cukup tampilkan daftar judul dan ringkasan draf. Judul-judul ini tidak boleh berupa tautan (link) untuk mencegah masalah saat proses build.

Tujuan utamanya adalah untuk membuat dasbor 'baca-saja' yang terisolasi untuk menghindari error hidrasi atau build yang gagal, bukan sistem pratinjau yang terintegrasi."

Dengan memberikan perintah terstruktur seperti ini, Anda tidak hanya memberi tahu AI apa yang Anda inginkan, tetapi juga bagaimana cara melakukannya dengan aman, berdasarkan prinsip-prinsip yang telah kita pelajari. Ini adalah kunci kolaborasi manusia-AI yang sukses: Anda sebagai arsitek, AI sebagai pelaksana ahli.

---

Bacaan Terkait

• Jebakan di Dunia Next.js: 3 Dosa Pemicu Bug yang Kami Pelajari
• AI Anda Bingung? Mungkin Anda Salah Memberi 'Peta'. Cara Tepat Membaca Log Build Failed
• Bagaimana Saya 'Bicara' dengan AI: Mantra Anti-Gagal di Balik Pengembangan IR Web