Migrasi dari Next MDX ke Nuxt Content
Cerita di balik keputusan migrasi Next MDX ke Nuxt Content setelah 3 tahun tak tersentuh
A Story
Website ini sebelumnya dibangun menggunakan Next.js dengan MDX untuk menulis artikel. Idenya menarik di awal — menulis Markdown yang bisa diselipi komponen React. Karena saat itu baru lulus sekolah dan "cuman bisa React", fitur terbaru Next 13 soal App router itu juga lagi hype, akhirnya saya tertarik membuat personal site dengan Next - MDX.
Versi lama bisa dilihat di sini: personal-site-old.
Masalah dengan Next MDX
React itu unopinionated. Apalagi 4-5 tahun yang lalu saat baru belajar dan menonton tutorial di YouTube, itu tiap channel punya style berbeda. Saat itu belum ada AI dan browsing alakadarnya anak SMA, stackoverflow, forum/diskusi, sampai DM pak Sandhika Galih buat minta bantuan. Bahkan yang paling ngeselin, masuk ke Github Issue dan ternyata masih open.
Versi baru, tidak support
MDX tidak jalan di Next.js versi terbaru 13. Saya harus downgrade ke versi yang compatible, dan berdoa upgrade berikutnya tidak merusak apa-apa.Debugging untuk hal yang sia-sia
Banyak waktu habis untuk debugging error yang sumbernya dari package itu sendiri. Jika beruntung kita akan menemukangithub issueyang masih open, atau yang kita orang pertama yang melaporkan issue ini.Status package
Tidak ada fix, tidak ada release, hanya issue yang menumpuk di GitHub. Project open source memang mulia, tapi maintener memprioritaskan pekerjaan utama yang sudah pasti punya value lebih (uang) dibanding meluangkan waktu untuk open source yang kurang dana.
Intinya, saya menghabiskan lebih banyak waktu testing - error - debugging - fixing tooling daripada menulis konten.
Kenapa Nuxt Content
Titik baliknya datang dari pengalaman kerja. Di perusahaan sebelumnya, kami punya internal platform yang awalnya ditulis dengan Next.js lalu dimigrasi ke Nuxt. Dari situ saya merasa pengalaman development dengan Vue, khususnya Nuxt, jauh lebih magical.
Nuxt Content minim konfigurasi:
File-based, langsung jalan
Tulis Markdown di foldercontent/, langsung bisa di-query. Tidak perlu konfigurasi versi yang ribet.Markdown yang diperkaya (MDC)
Bisa menyisipkan komponen Vue di dalam Markdown lewat sintaks MDC, mirip semangat MDX tapi lebih rapi dan terintegrasi.Query layaknya database
Konten bisa di-query dengan API yang ekspresif untuk filter, sort, dan pagination tanpa boilerplate.Maintained dan first-party
Ini bagian terpenting. Nuxt Content dirawat sebagai bagian dari ekosistem resmi Nuxt, bukan package pihak ketiga yang sewaktu-waktu bisa archived di repo nya.
Proses Migrasi
Migrasinya ternyata lebih mulus dari ekspektasi.
- File
.mdxsaya konversi ke.mdbiasa. Sebagian besar artikel saya memang Markdown murni tanpa banyak komponen, jadi prosesnya cepat. - Frontmatter tetap dipertahankan —
title,date,description,tags. Nuxt Content membacanya tanpa perlu setup tambahan. - Komponen kustom yang dulu di-import di MDX saya ganti dengan komponen global Vue yang bisa dipakai langsung lewat MDC.
- Rendering ditangani komponen
<ContentRenderer>, jadi tidak perlu lagi memikirkan loader dan plugin Webpack/Babel yang dulu sering bermasalah.
Penutup
Pelajaran yang saya ambil: pilih tooling yang sehat ekosistemnya, bukan hanya yang paling hype saat itu. MDX adalah ide bagus, tapi ketergantungan pada package eksperimental yang akhirnya ditinggal membuat maintenance-nya tidak sepadan.
Pindah ke Nuxt Content bukan soal Vue lebih baik dari React, tapi soal developer experience yang membuat saya kembali fokus menulis, bukan menambal tooling.