[{"data":1,"prerenderedAt":335},["ShallowReactive",2],{"blog-migrasi-next-mdx-ke-nuxt-content":3},{"id":4,"title":5,"body":6,"date":323,"description":324,"extension":325,"meta":326,"navigation":327,"path":328,"seo":329,"stem":330,"tags":331,"__hash__":334},"blog\u002Fblog\u002Fmigrasi-next-mdx-ke-nuxt-content.md","Migrasi dari Next MDX ke Nuxt Content",{"type":7,"value":8,"toc":313},"minimark",[9,14,23,34,38,52,110,117,121,135,143,199,203,206,264,268,285,294,298],[10,11,13],"h2",{"id":12},"a-story","A Story",[15,16,17,18,22],"p",{},"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 \"",[19,20,21],"em",{},"cuman bisa React","\", fitur terbaru Next 13 soal App router itu juga lagi hype, akhirnya saya tertarik membuat personal site dengan Next - MDX.",[15,24,25,26,33],{},"Versi lama bisa dilihat di sini: ",[27,28,32],"a",{"href":29,"rel":30},"https:\u002F\u002Fgithub.com\u002Frdwansch\u002Fpersonal-site-old\u002F",[31],"nofollow","personal-site-old",".",[10,35,37],{"id":36},"masalah-dengan-next-mdx","Masalah dengan Next MDX",[15,39,40,41,46,47,51],{},"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\u002Fdiskusi, sampai DM pak ",[27,42,45],{"href":43,"rel":44},"https:\u002F\u002Fwww.instagram.com\u002Fsandhikagalih\u002F",[31],"Sandhika Galih"," buat minta bantuan. Bahkan yang paling ngeselin, masuk ke ",[48,49,50],"code",{},"Github Issue"," dan ternyata masih open.",[53,54,55,72,91],"ul",{},[56,57,58,63,64,67,68,71],"li",{},[59,60,62],"h4",{"id":61},"versi-baru-tidak-support","Versi baru, tidak support","\nMDX tidak jalan di Next.js versi terbaru 13. Saya harus downgrade ke versi yang ",[19,65,66],{},"compatible",", dan berdoa ",[19,69,70],{},"upgrade"," berikutnya tidak merusak apa-apa.",[56,73,74,78,79,82,83,86,87,90],{},[59,75,77],{"id":76},"debugging-untuk-hal-yang-sia-sia","Debugging untuk hal yang sia-sia","\nBanyak waktu habis untuk ",[19,80,81],{},"debugging error"," yang sumbernya dari ",[19,84,85],{},"package"," itu sendiri. Jika beruntung kita akan menemukan ",[48,88,89],{},"github issue"," yang masih open, atau yang kita orang pertama yang melaporkan issue ini.",[56,92,93,97,98,101,102,105,106,109],{},[59,94,96],{"id":95},"status-package","Status package","\nTidak ada ",[19,99,100],{},"fix",", tidak ada ",[19,103,104],{},"release",", hanya ",[19,107,108],{},"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.",[15,111,112,113,116],{},"Intinya, saya menghabiskan lebih banyak waktu testing - error - debugging - fixing ",[19,114,115],{},"tooling"," daripada menulis konten.",[10,118,120],{"id":119},"kenapa-nuxt-content","Kenapa Nuxt Content",[15,122,123,124,127,128,131,132,33],{},"Titik baliknya datang dari pengalaman kerja. Di perusahaan sebelumnya, kami punya ",[19,125,126],{},"internal platform"," yang awalnya ditulis dengan Next.js lalu dimigrasi ke Nuxt. Dari situ saya merasa pengalaman ",[19,129,130],{},"development"," dengan Vue, khususnya Nuxt, jauh lebih ",[19,133,134],{},"magical",[15,136,137,142],{},[27,138,141],{"href":139,"rel":140},"https:\u002F\u002Fcontent.nuxt.com\u002F",[31],"Nuxt Content"," minim konfigurasi:",[53,144,145,160,172,189],{},[56,146,147,151,152,155,156,159],{},[59,148,150],{"id":149},"file-based-langsung-jalan","File-based, langsung jalan","\nTulis Markdown di folder ",[48,153,154],{},"content\u002F",", langsung bisa di-",[19,157,158],{},"query",". Tidak perlu konfigurasi versi yang ribet.",[56,161,162,166,167,171],{},[59,163,165],{"id":164},"markdown-yang-diperkaya-mdc","Markdown yang diperkaya (MDC)","\nBisa menyisipkan komponen Vue di dalam Markdown lewat sintaks ",[168,169,170],"strong",{},"MDC",", mirip semangat MDX tapi lebih rapi dan terintegrasi.",[56,173,174,178,179,181,182,185,186,33],{},[59,175,177],{"id":176},"query-layaknya-database","Query layaknya database","\nKonten bisa di-",[19,180,158],{}," dengan ",[19,183,184],{},"API"," yang ekspresif untuk filter, sort, dan pagination tanpa ",[19,187,188],{},"boilerplate",[56,190,191,195,196,198],{},[59,192,194],{"id":193},"maintained-dan-first-party","Maintained dan first-party","\nIni bagian terpenting. Nuxt Content dirawat sebagai bagian dari ekosistem resmi Nuxt, bukan ",[19,197,85],{}," pihak ketiga yang sewaktu-waktu bisa archived di repo nya.",[10,200,202],{"id":201},"proses-migrasi","Proses Migrasi",[15,204,205],{},"Migrasinya ternyata lebih mulus dari ekspektasi.",[53,207,208,219,239,246],{},[56,209,210,211,214,215,218],{},"File ",[48,212,213],{},".mdx"," saya konversi ke ",[48,216,217],{},".md"," biasa. Sebagian besar artikel saya memang Markdown murni tanpa banyak komponen, jadi prosesnya cepat.",[56,220,221,224,225,228,229,228,232,228,235,238],{},[19,222,223],{},"Frontmatter"," tetap dipertahankan — ",[48,226,227],{},"title",", ",[48,230,231],{},"date",[48,233,234],{},"description",[48,236,237],{},"tags",". Nuxt Content membacanya tanpa perlu setup tambahan.",[56,240,241,242,245],{},"Komponen kustom yang dulu di-",[19,243,244],{},"import"," di MDX saya ganti dengan komponen global Vue yang bisa dipakai langsung lewat MDC.",[56,247,248,251,252,255,256,259,260,263],{},[19,249,250],{},"Rendering"," ditangani komponen ",[48,253,254],{},"\u003CContentRenderer>",", jadi tidak perlu lagi memikirkan ",[19,257,258],{},"loader"," dan ",[19,261,262],{},"plugin"," Webpack\u002FBabel yang dulu sering bermasalah.",[10,265,267],{"id":266},"penutup","Penutup",[15,269,270,271,273,274,277,278,280,281,284],{},"Pelajaran yang saya ambil: pilih ",[19,272,115],{}," yang sehat ekosistemnya, bukan hanya yang paling ",[19,275,276],{},"hype"," saat itu. MDX adalah ide bagus, tapi ketergantungan pada ",[19,279,85],{}," eksperimental yang akhirnya ditinggal membuat ",[19,282,283],{},"maintenance","-nya tidak sepadan.",[15,286,287,288,291,292,33],{},"Pindah ke Nuxt Content bukan soal Vue lebih baik dari React, tapi soal ",[19,289,290],{},"developer experience"," yang membuat saya kembali fokus menulis, bukan menambal ",[19,293,115],{},[10,295,297],{"id":296},"referensi","Referensi",[15,299,300,303,304,303,309,312],{},[27,301,141],{"href":139,"rel":302},[31]," *\n",[27,305,308],{"href":306,"rel":307},"https:\u002F\u002Fcontent.nuxt.com\u002Fdocs\u002Ffiles\u002Fmarkdown#mdc-syntax",[31],"MDC Syntax",[27,310,32],{"href":29,"rel":311},[31]," *",{"title":314,"searchDepth":315,"depth":315,"links":316},"",2,[317,318,319,320,321,322],{"id":12,"depth":315,"text":13},{"id":36,"depth":315,"text":37},{"id":119,"depth":315,"text":120},{"id":201,"depth":315,"text":202},{"id":266,"depth":315,"text":267},{"id":296,"depth":315,"text":297},"2026-06-14","Cerita di balik keputusan migrasi Next MDX ke Nuxt Content setelah 3 tahun tak tersentuh","md",{},true,"\u002Fblog\u002Fmigrasi-next-mdx-ke-nuxt-content",{"title":5,"description":324},"blog\u002Fmigrasi-next-mdx-ke-nuxt-content",[332,333],"Nuxt","Next","WRaGGFSEjodEGEMzoEzD2kkfpgisKbO1oD_g3OsAep8",1781958637477]