[{"data":1,"prerenderedAt":409},["ShallowReactive",2],{"navigation":3,"/blog/next-js-app-and-page-router":30,"/blog/next-js-app-and-page-router-surround":404},[4],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Blog","/blog","blog",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"Next.js: Rahasia di Balik Website Super Cepat dan Ramah SEO","/blog/apa-itu-next-js","blog/apa-itu-next-js",{"title":14,"path":15,"stem":16},"Mengenal React JS: Library JavaScript Paling Populer untuk Membangun Website Modern","/blog/apa-itu-react","blog/apa-itu-react",{"title":18,"path":19,"stem":20},"Vue.js 101: Panduan Lengkap untuk Pemula dalam Memahami Framework Web Modern","/blog/apa-itu-vue","blog/apa-itu-vue",{"title":22,"path":23,"stem":24},"App Router vs Pages Router: Memahami Evolusi Next.js untuk Pemula","/blog/next-js-app-and-page-router","blog/next-js-app-and-page-router",{"title":26,"path":27,"stem":28},"React vs Vue: Mana yang Lebih Baik untuk Website Anda di Tahun 2026?","/blog/react-vs-vue","blog/react-vs-vue",false,{"id":31,"title":22,"author":32,"body":36,"date":395,"description":396,"extension":397,"image":398,"meta":399,"minRead":400,"navigation":401,"path":23,"seo":402,"stem":24,"__hash__":403},"blog/blog/next-js-app-and-page-router.md",{"name":33,"avatar":34},"Ilham Naufal Arbani",{"src":35,"alt":33},"https://ui-avatars.com/api/?name=Ilham+Arbani&background=000&color=fff",{"type":37,"value":38,"toc":380},"minimark",[39,44,57,68,71,74,79,84,118,120,124,129,157,159,163,166,171,201,205,208,212,225,227,231,330,332,336,339,358,360,364,367,373],[40,41,43],"h1",{"id":42},"app-router-vs-pages-router-mana-yang-harus-kamu-pelajari-di-2026","App Router vs Pages Router: Mana yang Harus Kamu Pelajari di 2026?",[45,46,47,48,52,53,56],"p",{},"Jika kamu baru saja menginstal Next.js, kamu mungkin akan melihat dua pilihan cara mengatur folder: ",[49,50,51],"strong",{},"Pages Router"," dan ",[49,54,55],{},"App Router",".",[45,58,59,60,63,64,67],{},"Bagi orang awam, ini mungkin terdengar teknis. Namun, bayangkan ini seperti berpindah dari ",[49,61,62],{},"Telepon Kabel (Pages Router)"," ke ",[49,65,66],{},"Smartphone (App Router)",". Keduanya berfungsi untuk menelepon, tapi cara kerja dan fitur yang ditawarkan Smartphone jauh lebih canggih dan efisien.",[45,69,70],{},"Mari kita bedah perbedaannya agar kamu tidak tersesat!",[72,73],"hr",{},[75,76,78],"h2",{"id":77},"_1-mengenal-pages-router-si-klasik-yang-sederhana","1. Mengenal Pages Router (Si Klasik yang Sederhana)",[45,80,81,83],{},[49,82,51],{}," adalah sistem lama yang sudah digunakan Next.js sejak awal. Cara kerjanya sangat \"apa adanya\".",[85,86,87,106,112],"ul",{},[88,89,90,93,94,98,99,102,103,56],"li",{},[49,91,92],{},"Struktur Folder:"," Kamu punya folder bernama ",[95,96,97],"code",{},"pages",". Jika kamu membuat file ",[95,100,101],{},"tentang.js"," di dalamnya, maka otomatis website kamu punya halaman ",[95,104,105],{},"domain.com/tentang",[88,107,108,111],{},[49,109,110],{},"Logika:"," Satu file sama dengan satu halaman penuh.",[88,113,114,117],{},[49,115,116],{},"Kekurangan:"," Jika kamu punya bagian yang sama di setiap halaman (seperti menu navigasi), mengaturnya sedikit lebih repot dan kurang efisien untuk aplikasi yang sangat besar.",[72,119],{},[75,121,123],{"id":122},"_2-mengenal-app-router-si-modern-yang-canggih","2. Mengenal App Router (Si Modern yang Canggih)",[45,125,126,128],{},[49,127,55],{}," diperkenalkan mulai Next.js versi 13 dan sekarang menjadi standar utama (rekomendasi Vercel). Ia membawa perubahan besar pada cara website memproses data.",[85,130,131,147],{},[88,132,133,135,136,139,140,143,144,56],{},[49,134,92],{}," Kamu menggunakan folder bernama ",[95,137,138],{},"app",". Setiap halaman memiliki foldernya sendiri, dan nama filenya wajib ",[95,141,142],{},"page.js",". Contoh: ",[95,145,146],{},"app/tentang/page.js",[88,148,149,152,153,156],{},[49,150,151],{},"Kelebihan Utama:"," Ia mendukung fitur bernama ",[49,154,155],{},"React Server Components",". Ini memungkinkan website kamu memproses data di server dengan jauh lebih cepat sebelum dikirim ke mata pengunjung.",[72,158],{},[75,160,162],{"id":161},"_3-perbedaan-utama-yang-perlu-kamu-tahu","3. Perbedaan Utama yang Perlu Kamu Tahu",[45,164,165],{},"Berikut adalah poin-poin mendasar yang membedakan keduanya:",[167,168,170],"h3",{"id":169},"a-struktur-navigasi-routing","A. Struktur Navigasi (Routing)",[85,172,173,187],{},[88,174,175,178,179,182,183,186],{},[49,176,177],{},"Pages Router:"," Nama file adalah nama linknya. (",[95,180,181],{},"about.js"," -> ",[95,184,185],{},"/about",").",[88,188,189,192,193,195,196,182,199,186],{},[49,190,191],{},"App Router:"," Nama folder adalah nama linknya, filenya harus bernama ",[95,194,142],{},". (",[95,197,198],{},"about/page.js",[95,200,185],{},[167,202,204],{"id":203},"b-layout-bertingkat-nested-layouts","B. Layout Bertingkat (Nested Layouts)",[45,206,207],{},"Inilah fitur \"pembunuh\" di App Router. Kamu bisa membuat sebuah desain (misalnya Sidebar) yang hanya muncul di folder tertentu tanpa harus memuat ulang sidebar tersebut saat pindah halaman. Di Pages Router, hal ini jauh lebih rumit untuk dilakukan.",[167,209,211],{"id":210},"c-server-components-vs-client-components","C. Server Components vs Client Components",[85,213,214,220],{},[88,215,216,217,219],{},"Di ",[49,218,55],{},", secara otomatis semua komponen adalah \"Server Component\". Artinya, beban kerja dilakukan di komputer server yang sangat kuat, bukan di HP atau laptop pengunjung yang mungkin speknya rendah.",[88,221,216,222,224],{},[49,223,51],{},", browser pengunjung masih harus melakukan banyak kerja keras untuk menampilkan website.",[72,226],{},[75,228,230],{"id":229},"_4-tabel-perbandingan-cepat","4. Tabel Perbandingan Cepat",[232,233,234,251],"table",{},[235,236,237],"thead",{},[238,239,240,245,248],"tr",{},[241,242,244],"th",{"align":243},"left","Fitur",[241,246,247],{"align":243},"Pages Router (Lama)",[241,249,250],{"align":243},"App Router (Baru)",[252,253,254,272,291,304,317],"tbody",{},[238,255,256,262,267],{},[257,258,259],"td",{"align":243},[49,260,261],{},"Folder Utama",[257,263,264],{"align":243},[95,265,266],{},"/pages",[257,268,269],{"align":243},[95,270,271],{},"/app",[238,273,274,279,286],{},[257,275,276],{"align":243},[49,277,278],{},"Nama File Halaman",[257,280,281,282,285],{"align":243},"Bebas (",[95,283,284],{},"kontak.js",")",[257,287,288,289],{"align":243},"Harus ",[95,290,142],{},[238,292,293,298,301],{},[257,294,295],{"align":243},[49,296,297],{},"Kecepatan",[257,299,300],{"align":243},"Cepat",[257,302,303],{"align":243},"Sangat Cepat (Optimasi Server)",[238,305,306,311,314],{},[257,307,308],{"align":243},[49,309,310],{},"SEO",[257,312,313],{"align":243},"Bagus",[257,315,316],{"align":243},"Sangat Bagus",[238,318,319,324,327],{},[257,320,321],{"align":243},[49,322,323],{},"Kemudahan Belajar",[257,325,326],{"align":243},"Lebih Mudah",[257,328,329],{"align":243},"Sedikit Lebih Menantang",[72,331],{},[75,333,335],{"id":334},"_5-jadi-mana-yang-harus-kamu-gunakan","5. Jadi, Mana yang Harus Kamu Gunakan?",[45,337,338],{},"Di tahun 2026 ini, jawabannya cukup jelas:",[85,340,341,347],{},[88,342,343,346],{},[49,344,345],{},"Gunakan App Router jika:"," Kamu sedang membangun proyek baru. Ini adalah masa depan Next.js. Semua fitur terbaru dan optimasi performa paling canggih hanya ada di sini.",[88,348,349,352,353,357],{},[49,350,351],{},"Gunakan Pages Router jika:"," Kamu sedang memelihara (",[354,355,356],"em",{},"maintenance",") project lama yang sudah dibuat bertahun-tahun lalu, atau jika kamu merasa App Router terlalu rumit untuk kebutuhan website yang sangat-sangat sederhana.",[72,359],{},[75,361,363],{"id":362},"kesimpulan","Kesimpulan",[45,365,366],{},"Pindah dari Pages Router ke App Router memang butuh sedikit penyesuaian logika. Namun, hasil yang didapat—website yang lebih kencang, struktur yang lebih rapi, dan fitur yang lebih modern—sangatlah sepadan.",[45,368,369,370,372],{},"Jangan takut untuk mencoba ",[49,371,55],{},". Meskipun strukturnya terlihat lebih banyak folder, ia sebenarnya dirancang untuk membuat hidup developer lebih mudah dalam jangka panjang.",[45,374,375],{},[354,376,377],{},[49,378,379],{},"Selamat mencoba mengeksplorasi folder 'app' di project Next.js kamu!",{"title":381,"searchDepth":382,"depth":382,"links":383},"",2,[384,385,386,392,393,394],{"id":77,"depth":382,"text":78},{"id":122,"depth":382,"text":123},{"id":161,"depth":382,"text":162,"children":387},[388,390,391],{"id":169,"depth":389,"text":170},3,{"id":203,"depth":389,"text":204},{"id":210,"depth":389,"text":211},{"id":229,"depth":382,"text":230},{"id":334,"depth":382,"text":335},{"id":362,"depth":382,"text":363},"2026-02-08T00:00:00.000Z","Bingung melihat perbedaan struktur folder di Next.js? Simak panduan lengkap mengenai perbedaan App Router dan Pages Router agar Anda tidak salah pilih saat mulai belajar.","md","https://media2.dev.to/dynamic/image/width=1280,height=720,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj7e2yd6s39idj27xiaah.png",{},12,true,{"title":22,"description":396},"03gguZ8z_24yO64uCyqrxNusMfEI1siUAZR6YuG556I",[405,407],{"title":18,"path":19,"stem":20,"description":406,"children":-1},"Pelajari apa itu Vue.js, cara kerjanya, dan mengapa framework ini sangat populer melalui panduan deskriptif yang mudah dipahami oleh orang awam sekalipun.",{"title":26,"path":27,"stem":28,"description":408,"children":-1},"Bingung memilih antara React JS dan Vue.js? Simak perbandingan mendalam, kelebihan, kekurangan, hingga panduan memilih yang paling tepat untuk proyek Anda.",1778254186040]