[{"data":1,"prerenderedAt":1080},["ShallowReactive",2],{"navigation":3,"index":30,"mdc-xg53c4-key":160,"mdc--ne69ir-key":173,"mdc-6jr48t-key":182,"index-blogs":191},[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":32,"about":33,"blog":36,"body":39,"contact":40,"description":43,"experience":44,"extension":61,"faq":62,"hero":93,"meta":127,"navigation":128,"path":129,"seo":130,"stem":133,"testimonials":134,"__hash__":159},"index/index.yml","Hey, I'm Ilham N Arbani Fullstack Developer",{"title":34,"description":35},"About Me","I am a Software Engineer & Full Stack JavaScript Specialist with over 7 years of experience in architecting, developing, and deploying scalable web and mobile applications.\nMy approach combines deep technical expertise with a strong Software Engineering mindset to solve complex business challenges through elegant, high-performance solutions.\n",{"title":37,"description":38},"Latest Articles","Some of my recent thoughts",null,{"title":41,"description":42},"Let's Work Together","Have a project in mind or just want to say hi? I'd love to hear from you. I'm currently available for freelance work and open to new opportunities.","I craft intuitive digital experiences where design meets functionality. Based in Indonesia, bringing ideas to life through code and creativity.",{"title":45,"items":46},"Work Experience",[47,52,56],{"position":48,"date":49,"company":50},"Frontend Developer at","2024 - Present",{"name":51},"Tonjoo",{"position":53,"date":54,"company":55},"Freelance Fullstack Developer","2018 - Present",{"name":39},{"position":57,"date":58,"company":59},"Software Engginer at","2022 - 2023",{"name":60},"Refactory","yml",{"title":63,"description":64,"categories":65},"Frequently Asked Questions","Answers to common questions about my process and services.",[66,78],{"title":67,"questions":68},"Services & Process",[69,72,75],{"label":70,"content":71},"What services do you offer?","I specialize in end-to-end Full Stack Web Development using the modern JavaScript ecosystem. My expertise covers building scalable backend systems using Node.js and NestJS, and creating dynamic, responsive frontends with React, Next.js, Vue.js, or Nuxt.js. I handle everything from database architecture and API design to UI implementation and cloud deployment.\n",{"label":73,"content":74},"What is your development process like?","My process covers the full Software Development Life Cycle (SDLC). It typically starts with Requirement Analysis & Architecture Design, followed by Database Setup & API Development. Once the core logic is ready, I proceed with Frontend Integration and UI implementation. I emphasize clean code, rigorous testing, and setting up CI/CD pipelines for smooth deployment.\n",{"label":76,"content":77},"Do you work with startups?","Absolutely! I specialize in helping startups build robust MVPs (Minimum Viable Products) that are scalable from day one. I can assist in choosing the right technology stack (like Next.js or Nuxt.js for SEO and performance) to ensure your product is market-ready and easy to maintain as your user base grows.\n",{"title":79,"questions":80},"Pricing & Timelines",[81,84,87,90],{"label":82,"content":83},"How much does a project typically cost?","Project costs vary based on feature complexity, system architecture requirements, and timeline. For custom full-stack applications (including backend, database, and frontend), my engagements typically start around $600, with complex platforms ranging between $800 and $1500. For specific technical consultation or backend optimization, my day rate is $30.\n",{"label":85,"content":86},"What are your payment terms?","I generally require a 40% deposit to kickstart the development phase, with the remaining 60% due upon successful deployment and final delivery. I accept payments via bank transfer and paypal.\n",{"label":88,"content":89},"How long does a typical project take?","Timelines depend heavily on the project's scope. A standard MVP might take 4-6 weeks, while larger, enterprise-grade applications can range from 3 to 6 months. I provide a detailed development roadmap with milestones after our initial discovery session.\n",{"label":91,"content":92},"Do you offer retainers or ongoing support?","Yes, software requires maintenance. I offer monthly retainer packages for server maintenance, bug fixes, dependency updates, and ongoing feature development to ensure your application remains secure and performant.\n",{"links":94,"images":99},[95],{"label":96,"to":97,"color":98},"Use this template","https://github.com/nuxt-ui-templates/portfolio","neutral",[100,103,106,109,112,115,118,121,124],{"src":101,"alt":102},"/hero/random-1.avif","Random Image 1",{"src":104,"alt":105},"/hero/random-2.avif","Random Image 2",{"src":107,"alt":108},"/hero/random-3.avif","Random Image 3",{"src":110,"alt":111},"/hero/random-4.avif","Random Image 4",{"src":113,"alt":114},"/hero/random-5.avif","Random Image 5",{"src":116,"alt":117},"/hero/random-6.avif","Random Image 6",{"src":119,"alt":120},"/hero/random-7.avif","Random Image 7",{"src":122,"alt":123},"/hero/random-8.avif","Random Image 8",{"src":125,"alt":126},"/hero/random-9.avif","Random Image 9",{},true,"/",{"title":131,"description":132},"Ilham N Arbani - Fullstack Developer","Welcome to my portfolio! I'm Ilham N Arbani, a fullstack developer based in Indonesia. I specialize in creating user-centered digital experiences that are both beautiful and functional.","index",[135,143,151],{"quote":136,"author":137},"Emma's approach to UX design completely transformed our product. She has a rare ability to balance beautiful aesthetics with functional simplicity. The redesign not only looked better, but it reduced our customer support tickets by 40% and increased conversion rates across all key metrics.",{"name":138,"description":139,"avatar":140},"Sarah Chen","Product Director at Bloom Finance",{"src":141,"srcset":142},"https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=40&h=40&q=80","https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=80&h=80&q=80 2x",{"quote":144,"author":145},"Working with Emma was the best decision we made for our startup. She didn't just deliver designs—she challenged our assumptions, conducted thorough user research, and created an experience that truly resonated with our audience. Her technical knowledge of front-end development meant the handoff to our engineering team was seamless.",{"name":146,"description":147,"avatar":148},"Michael Rodriguez","Co-founder of Wavelength Music",{"src":149,"srcset":150},"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=40&h=40&q=80","https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=80&h=80&q=80 2x",{"quote":152,"author":153},"Emma stands out in her ability to translate complex sustainability data into intuitive interfaces. Her work on EcoTrack wasn't just visually stunning—it fundamentally changed how our users interact with environmental information. She approaches each problem with both creativity and analytical rigor, which is exactly what we needed.",{"name":154,"description":155,"avatar":156},"Dr. Aisha Johnson","Chief Innovation Officer at GreenTech Solutions",{"src":157,"srcset":158},"https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=40&h=40&q=80","https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=80&h=80&q=80 2x","EJObmBaNPdT-XvmEUYcYEbZ497r54QUxfrcZENtxmDc",{"data":161,"body":162},{},{"type":163,"children":164},"root",[165],{"type":166,"tag":167,"props":168,"children":169},"element","p",{},[170],{"type":171,"value":172},"text","I specialize in end-to-end Full Stack Web Development using the modern JavaScript ecosystem. My expertise covers building scalable backend systems using Node.js and NestJS, and creating dynamic, responsive frontends with React, Next.js, Vue.js, or Nuxt.js. I handle everything from database architecture and API design to UI implementation and cloud deployment.",{"data":174,"body":175},{},{"type":163,"children":176},[177],{"type":166,"tag":167,"props":178,"children":179},{},[180],{"type":171,"value":181},"My process covers the full Software Development Life Cycle (SDLC). It typically starts with Requirement Analysis & Architecture Design, followed by Database Setup & API Development. Once the core logic is ready, I proceed with Frontend Integration and UI implementation. I emphasize clean code, rigorous testing, and setting up CI/CD pipelines for smooth deployment.",{"data":183,"body":184},{},{"type":163,"children":185},[186],{"type":166,"tag":167,"props":187,"children":188},{},[189],{"type":171,"value":190},"Absolutely! I specialize in helping startups build robust MVPs (Minimum Viable Products) that are scalable from day one. I can assist in choosing the right technology stack (like Next.js or Nuxt.js for SEO and performance) to ensure your product is market-ready and easy to maintain as your user base grows.",[192,471,731],{"id":193,"title":10,"author":194,"body":200,"date":463,"description":464,"extension":465,"image":466,"meta":467,"minRead":468,"navigation":128,"path":11,"seo":469,"stem":12,"__hash__":470},"blog/blog/apa-itu-next-js.md",{"name":195,"avatar":197},[196],"Nama Anda",{"src":198,"alt":199},"https://ui-avatars.com/api/?name=Author&background=000&color=fff",[196],{"type":201,"value":202,"toc":448},"minimark",[203,207,219,227,230,233,238,247,250,252,256,259,264,271,277,287,291,298,302,314,316,320,323,357,359,363,366,391,393,397,400,426,428,432,435,441],[204,205,10],"h1",{"id":206},"nextjs-rahasia-di-balik-website-super-cepat-dan-ramah-seo",[167,208,209,210,214,215,218],{},"Jika Anda sudah mengenal ",[211,212,213],"strong",{},"React JS",", Anda mungkin pernah mendengar tentang \"kakak\"-nya yang lebih canggih, yaitu ",[211,216,217],{},"Next.js",".",[167,220,221,222,226],{},"Banyak developer menyebut Next.js sebagai framework untuk ",[223,224,225],"em",{},"production",". Mengapa? Karena jika React adalah mesin mobil yang hebat, maka Next.js adalah mobil balap lengkap yang sudah dilengkapi turbo, navigasi GPS, dan sistem keamanan tingkat tinggi langsung dari pabriknya.",[167,228,229],{},"Mari kita bahas apa itu Next.js dan mengapa teknologi ini menjadi primadona di kalangan developer profesional saat ini.",[231,232],"hr",{},[234,235,237],"h2",{"id":236},"_1-apa-itu-nextjs","1. Apa Itu Next.js?",[167,239,240,242,243,246],{},[211,241,217],{}," adalah sebuah framework JavaScript yang dibangun di atas React. Diciptakan oleh perusahaan bernama ",[211,244,245],{},"Vercel",", Next.js hadir untuk menutupi beberapa kekurangan yang dimiliki oleh React standar, terutama dalam hal kecepatan pemuatan halaman dan kemudahan ditemukan oleh Google (SEO).",[167,248,249],{},"Jika React berfokus pada bagaimana tampilan dibuat (UI), Next.js berfokus pada bagaimana aplikasi tersebut dikirimkan ke pengguna dengan cara yang paling efisien dan cepat.",[231,251],{},[234,253,255],{"id":254},"_2-bagaimana-cara-kerja-nextjs","2. Bagaimana Cara Kerja Next.js?",[167,257,258],{},"Perbedaan terbesar Next.js dengan React biasa terletak pada cara ia menyajikan halaman web kepada pengunjung. Ada dua cara utama:",[260,261,263],"h3",{"id":262},"a-server-side-rendering-ssr","A. Server-Side Rendering (SSR)",[167,265,266,267,270],{},"Pada React biasa, browser Anda harus bekerja keras mengunduh semua kode JavaScript terlebih dahulu sebelum bisa menampilkan apa pun (ini disebut ",[223,268,269],{},"Client-Side Rendering",").",[167,272,273,274,276],{},"Di ",[211,275,217],{},", server akan menyiapkan halaman tersebut terlebih dahulu, lalu mengirimkannya ke browser dalam bentuk yang sudah jadi.",[278,279,280],"ul",{},[281,282,283,286],"li",{},[211,284,285],{},"Analoginya:"," Seperti memesan makanan. React biasa adalah seperti Anda datang ke restoran dan harus merakit burger sendiri. Sedangkan Next.js adalah pelayan yang membawakan burger yang sudah matang dan siap santap ke meja Anda.",[260,288,290],{"id":289},"b-static-site-generation-ssg","B. Static Site Generation (SSG)",[167,292,293,294,297],{},"Next.js bisa membuat semua halaman website Anda menjadi file statis saat proses pembuatan (",[223,295,296],{},"build time","). Hasilnya? Website Anda akan terasa secepat kilat karena server tidak perlu berpikir lagi saat ada pengunjung datang; ia hanya tinggal memberikan file yang sudah jadi.",[260,299,301],{"id":300},"c-file-based-routing","C. File-Based Routing",[167,303,304,305,309,310,313],{},"Lupakan pengaturan navigasi yang rumit. Di Next.js, jika Anda membuat file baru bernama ",[306,307,308],"code",{},"kontak.js"," di dalam folder khusus, otomatis website Anda akan memiliki halaman ",[306,311,312],{},"/kontak",". Sangat simpel dan rapi.",[231,315],{},[234,317,319],{"id":318},"_3-kelebihan-utama-nextjs","3. Kelebihan Utama Next.js",[167,321,322],{},"Kenapa Anda harus mempertimbangkan Next.js untuk proyek besar?",[278,324,325,331,341,347],{},[281,326,327,330],{},[211,328,329],{},"SEO yang Luar Biasa:"," Karena halaman sudah \"matang\" saat dikirim dari server, Google bisa dengan sangat mudah membaca isi website Anda. Ini adalah kunci agar website muncul di halaman pertama pencarian.",[281,332,333,336,337,340],{},[211,334,335],{},"Kecepatan Optimal:"," Fitur seperti ",[223,338,339],{},"Image Optimization"," secara otomatis akan mengecilkan ukuran foto di web Anda tanpa mengurangi kualitasnya, sehingga loading web tetap kencang.",[281,342,343,346],{},[211,344,345],{},"Keamanan Lebih Terjamin:"," Karena banyak proses dilakukan di sisi server, kode-kode penting aplikasi Anda tidak mudah diintip oleh orang asing melalui browser.",[281,348,349,352,353,356],{},[211,350,351],{},"Developer Experience:"," Next.js menyediakan fitur ",[223,354,355],{},"Fast Refresh",". Begitu Anda mengubah kode, perubahan langsung terlihat di layar dalam sekejap tanpa kehilangan data yang sedang Anda input.",[231,358],{},[234,360,362],{"id":361},"_4-kenapa-harus-menggunakan-nextjs","4. Kenapa Harus Menggunakan Next.js?",[167,364,365],{},"Anda harus menggunakan Next.js jika:",[367,368,369,375,385],"ol",{},[281,370,371,374],{},[211,372,373],{},"SEO adalah Prioritas:"," Jika Anda membangun blog, toko online, atau portal berita yang sangat bergantung pada kunjungan dari Google.",[281,376,377,380,381,384],{},[211,378,379],{},"User Experience yang Mulus:"," Anda ingin pengunjung merasa nyaman karena perpindahan halaman yang instan tanpa ada logo ",[223,382,383],{},"loading"," yang terus berputar.",[281,386,387,390],{},[211,388,389],{},"Skalabilitas Bisnis:"," Next.js sangat kuat digunakan untuk aplikasi skala kecil hingga aplikasi raksasa dengan jutaan pengunjung per bulan.",[231,392],{},[234,394,396],{"id":395},"_5-case-apa-saja-yang-cocok-menggunakan-nextjs","5. Case Apa Saja yang Cocok Menggunakan Next.js?",[167,398,399],{},"Beberapa jenis proyek yang sangat disarankan menggunakan Next.js adalah:",[278,401,402,408,414,420],{},[281,403,404,407],{},[211,405,406],{},"E-commerce:"," Seperti Tokopedia atau Shopee yang butuh ribuan halaman produk terindeks di Google.",[281,409,410,413],{},[211,411,412],{},"Portal Berita dan Blog:"," Yang membutuhkan kecepatan baca dan update konten secara real-time.",[281,415,416,419],{},[211,417,418],{},"Landing Page Perusahaan:"," Agar performa nilai (Google Lighthouse Score) website perusahaan Anda mendapatkan nilai sempurna (100/100).",[281,421,422,425],{},[211,423,424],{},"Aplikasi Web Kompleks (SaaS):"," Dashboard yang membutuhkan performa tinggi dan keamanan data yang lebih ketat.",[231,427],{},[234,429,431],{"id":430},"kesimpulan","Kesimpulan",[167,433,434],{},"Next.js bukan sekadar tambahan untuk React, melainkan standar baru dalam membangun aplikasi web yang profesional. Dengan fitur otomatisasi yang cerdas, Next.js memanjakan developer sekaligus memberikan pengalaman terbaik bagi pengguna.",[167,436,437,438],{},"Jika Anda ingin membangun website yang tidak hanya terlihat bagus, tapi juga cepat, aman, dan mudah ditemukan di internet, ",[211,439,440],{},"Next.js adalah jawabannya.",[167,442,443],{},[223,444,445],{},[211,446,447],{},"Sudah siap meningkatkan level website Anda dengan Next.js?",{"title":449,"searchDepth":450,"depth":450,"links":451},"",2,[452,453,459,460,461,462],{"id":236,"depth":450,"text":237},{"id":254,"depth":450,"text":255,"children":454},[455,457,458],{"id":262,"depth":456,"text":263},3,{"id":289,"depth":456,"text":290},{"id":300,"depth":456,"text":301},{"id":318,"depth":450,"text":319},{"id":361,"depth":450,"text":362},{"id":395,"depth":450,"text":396},{"id":430,"depth":450,"text":431},"2026-02-08T00:00:00.000Z","Apa itu Next.js? Pelajari mengapa framework ini menjadi standar baru dalam pengembangan web modern, kelebihannya dibanding React standar, dan kapan Anda harus menggunakannya.","md","https://miro.medium.com/v2/0*5utjg5HOXBLr9D-Z.png",{},10,{"title":10,"description":464},"GDhzcJ6bnER82NuUugXY4hdLuYp7pvpUeicH-7P6aOE",{"id":472,"title":14,"author":473,"body":477,"date":463,"description":725,"extension":465,"image":726,"meta":727,"minRead":728,"navigation":128,"path":15,"seo":729,"stem":16,"__hash__":730},"blog/blog/apa-itu-react.md",{"name":474,"avatar":475},"Ilham Naufal Arbani",{"src":476,"alt":474},"https://ui-avatars.com/api/?name=Ilham+Arbani&background=61dafb&color=000",{"type":201,"value":478,"toc":713},[479,483,490,495,498,500,504,513,520,529,531,535,538,542,549,556,560,563,571,578,582,588,591,599,601,605,608,638,640,644,647,661,663,667,670,696,698,700,703,706],[204,480,482],{"id":481},"mengenal-react-js-si-otak-di-balik-website-super-canggih","Mengenal React JS: Si \"Otak\" di Balik Website Super Canggih",[167,484,485,486,489],{},"Pernahkah kamu bertanya-tanya bagaimana Facebook, Instagram, atau Netflix bisa terasa begitu sangat halus saat digunakan? Saat kamu menekan tombol \"Like\" di Instagram, angka bertambah seketika tanpa ada proses pemuatan ulang (",[223,487,488],{},"refresh",") halaman yang membosankan.",[167,491,492,493,218],{},"Nah, sebagian besar pengalaman mulus itu berkat sebuah teknologi bernama ",[211,494,213],{},[167,496,497],{},"Jika kamu baru ingin terjun ke dunia web development atau sekadar ingin tahu kenapa teknologi ini begitu dibicarakan, artikel ini akan merangkumnya khusus untukmu dengan bahasa yang santai.",[231,499],{},[234,501,503],{"id":502},"_1-apa-itu-react-js","1. Apa Itu React JS?",[167,505,506,508,509,512],{},[211,507,213],{}," (sering disebut React saja) adalah sebuah ",[223,510,511],{},"library"," JavaScript yang digunakan untuk membangun antarmuka pengguna (UI). Sederhananya, React adalah alat bantu untuk membuat tampilan website agar lebih interaktif dan dinamis.",[167,514,515,516,519],{},"React pertama kali dibuat oleh ",[211,517,518],{},"Jordan Walke",", seorang engineer di Facebook (sekarang Meta) pada tahun 2011. Awalnya, React diciptakan untuk menyelesaikan masalah internal Facebook: bagaimana cara mengelola ribuan fitur yang terus berubah datanya setiap detik tanpa membuat website jadi lambat.",[521,522,523],"blockquote",{},[167,524,525,528],{},[211,526,527],{},"Catatan Penting:"," Banyak orang menyebut React sebagai \"Framework\", namun secara teknis React adalah sebuah \"Library\". Bedanya? Library memberi kamu lebih banyak kebebasan untuk memilih alat tambahan lainnya, seperti memilih bumbu tambahan untuk masakanmu sendiri.",[231,530],{},[234,532,534],{"id":533},"_2-bagaimana-cara-kerja-react-js","2. Bagaimana Cara Kerja React JS?",[167,536,537],{},"React punya cara kerja yang unik yang membuatnya berbeda dari cara membuat website tradisional. Ada tiga pilar utamanya:",[260,539,541],{"id":540},"a-berpikir-dalam-komponen-component-based","A. Berpikir dalam Komponen (Component-Based)",[167,543,544,545,548],{},"Bayangkan kamu sedang bermain ",[211,546,547],{},"LEGO",". Untuk membangun istana yang besar, kamu butuh balok-balok kecil yang disusun menjadi satu.",[167,550,551,552,555],{},"Di React, setiap bagian website (seperti tombol, kolom komentar, navigasi, hingga foto profil) adalah sebuah ",[211,553,554],{},"Komponen",". Komponen ini bersifat mandiri. Artinya, jika kamu mengubah tampilan \"Tombol\", bagian lain di website tidak akan terganggu. Kamu juga bisa menggunakan tombol yang sama di berbagai halaman tanpa perlu menulis kodenya dari nol lagi.",[260,557,559],{"id":558},"b-deklaratif-cukup-katakan-apa-yang-kamu-mau","B. Deklaratif (Cukup Katakan Apa yang Kamu Mau)",[167,561,562],{},"Dalam pemrograman tradisional (Imperatif), kamu harus memberi tahu komputer langkah-langkah detail untuk melakukan sesuatu.",[278,564,565],{},[281,566,567,570],{},[223,568,569],{},"Tradisional:"," \"Ambil data ini, cari elemen HTML ini, hapus teks lamanya, masukkan teks baru.\"",[167,572,573,574,577],{},"Dalam ",[211,575,576],{},"React (Deklaratif)",", kamu cukup bilang: \"Saya ingin tampilan seperti ini saat data ada, dan seperti itu saat data kosong.\" React yang akan mengurus bagaimana cara mencapainya. Ini membuat kode lebih mudah dibaca dan dikurangi potensi error.",[260,579,581],{"id":580},"c-virtual-dom-si-penyaring-yang-cerdas","C. Virtual DOM (Si Penyaring yang Cerdas)",[167,583,584,585,218],{},"Ini adalah \"senjata rahasia\" React. Mengubah tampilan di browser itu proses yang berat. React membuat \"kembaran\" dari website kamu di memori komputer yang disebut ",[211,586,587],{},"Virtual DOM",[167,589,590],{},"Saat ada perubahan (misalnya ada pesan chat masuk), React akan membandingkan \"kembaran\" tersebut dengan tampilan asli. React hanya akan memperbarui bagian yang benar-benar berubah saja.",[278,592,593],{},[281,594,595,598],{},[223,596,597],{},"Ibaratnya:"," Jika kamu hanya ingin mengganti warna cat pintu rumah, kamu tidak perlu merobohkan seluruh rumah dan membangunnya kembali dari awal. Cukup pintunya saja yang dicat ulang.",[231,600],{},[234,602,604],{"id":603},"_3-kelebihan-react-js","3. Kelebihan React JS",[167,606,607],{},"Kenapa banyak perusahaan besar beralih ke React? Inilah alasannya:",[367,609,610,616,622,632],{},[281,611,612,615],{},[211,613,614],{},"Kecepatan Luar Biasa:"," Berkat Virtual DOM, aplikasi yang dibuat dengan React terasa sangat responsif dan ringan.",[281,617,618,621],{},[211,619,620],{},"Ekosistem yang Masif:"," Karena sangat populer, hampir semua masalah yang kamu temui sudah ada solusinya di internet. Kamu tidak akan pernah \"tersesat\" sendirian.",[281,623,624,627,628,631],{},[211,625,626],{},"Bisa Menjadi Aplikasi Mobile:"," Jika kamu sudah paham React untuk web, kamu bisa dengan mudah belajar ",[211,629,630],{},"React Native"," untuk membuat aplikasi Android dan iOS. Satu ilmu untuk semua platform!",[281,633,634,637],{},[211,635,636],{},"SEO Friendly:"," Dengan bantuan alat tambahan (seperti Next.js), website yang dibuat dengan React bisa sangat mudah ditemukan oleh Google.",[231,639],{},[234,641,643],{"id":642},"_4-kenapa-kamu-harus-mulai-belajar-react","4. Kenapa Kamu Harus Mulai Belajar React?",[167,645,646],{},"Jika kamu adalah seorang calon developer atau pemilik bisnis:",[278,648,649,655],{},[281,650,651,654],{},[211,652,653],{},"Untuk Developer:"," Lowongan kerja untuk React Developer sangat melimpah dengan tawaran gaji yang sangat kompetitif di seluruh dunia.",[281,656,657,660],{},[211,658,659],{},"Untuk Pemilik Bisnis:"," Menggunakan React berarti aplikasi kamu lebih mudah dikembangkan di masa depan (scalable) dan memberikan pengalaman pengguna yang lebih baik, yang berujung pada kepuasan pelanggan.",[231,662],{},[234,664,666],{"id":665},"_5-case-apa-saja-yang-cocok-menggunakan-react","5. Case Apa Saja yang Cocok Menggunakan React?",[167,668,669],{},"React sangat ideal untuk proyek-proyek seperti:",[278,671,672,678,684,690],{},[281,673,674,677],{},[211,675,676],{},"Platform Media Sosial:"," Di mana banyak interaksi seperti Like, Comment, dan Share terjadi secara real-time.",[281,679,680,683],{},[211,681,682],{},"E-commerce (Marketplace):"," Untuk mengelola ribuan produk, filter harga, dan keranjang belanja yang dinamis.",[281,685,686,689],{},[211,687,688],{},"Aplikasi Dashboard & Analitik:"," Menampilkan grafik dan data statistik yang berubah-ubah secara instan.",[281,691,692,695],{},[211,693,694],{},"Streaming Platform:"," Seperti Netflix atau YouTube yang butuh performa tinggi saat memuat konten video.",[231,697],{},[234,699,431],{"id":430},[167,701,702],{},"React JS bukan sekadar tren sesaat. Ia adalah standar baru dalam industri pembuatan website modern. Dengan pendekatannya yang berbasis komponen dan efisiensi Virtual DOM, React membantu developer membangun aplikasi yang kompleks namun tetap mudah dikelola.",[167,704,705],{},"Memang, ada kurva belajar di awal, tapi hasil yang didapatkan sebanding dengan usaha yang dikeluarkan. Apakah kamu siap untuk membangun sesuatu yang luar biasa dengan React?",[167,707,708],{},[223,709,710],{},[211,711,712],{},"Keep coding and stay awesome!",{"title":449,"searchDepth":450,"depth":450,"links":714},[715,716,721,722,723,724],{"id":502,"depth":450,"text":503},{"id":533,"depth":450,"text":534,"children":717},[718,719,720],{"id":540,"depth":456,"text":541},{"id":558,"depth":456,"text":559},{"id":580,"depth":456,"text":581},{"id":603,"depth":450,"text":604},{"id":642,"depth":450,"text":643},{"id":665,"depth":450,"text":666},{"id":430,"depth":450,"text":431},"Panduan mendalam namun sederhana tentang React JS. Pelajari konsep komponen, Virtual DOM, dan alasan mengapa React menjadi skill wajib bagi developer di tahun 2026.","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT49sBsCfLlzkVBQ5NNlZSGUOMKMUr9HxkyMg&s",{},12,{"title":14,"description":725},"zuQeBL1u3Ta8TY0BljyGs3ZouFgsccejybnfS9aVFNk",{"id":732,"title":22,"author":733,"body":736,"date":463,"description":1075,"extension":465,"image":1076,"meta":1077,"minRead":728,"navigation":128,"path":23,"seo":1078,"stem":24,"__hash__":1079},"blog/blog/next-js-app-and-page-router.md",{"name":474,"avatar":734},{"src":735,"alt":474},"https://ui-avatars.com/api/?name=Ilham+Arbani&background=000&color=fff",{"type":201,"value":737,"toc":1063},[738,742,752,763,766,768,772,777,808,810,814,819,847,849,853,856,860,889,893,896,900,912,914,918,1016,1018,1022,1025,1043,1045,1047,1050,1056],[204,739,741],{"id":740},"app-router-vs-pages-router-mana-yang-harus-kamu-pelajari-di-2026","App Router vs Pages Router: Mana yang Harus Kamu Pelajari di 2026?",[167,743,744,745,748,749,218],{},"Jika kamu baru saja menginstal Next.js, kamu mungkin akan melihat dua pilihan cara mengatur folder: ",[211,746,747],{},"Pages Router"," dan ",[211,750,751],{},"App Router",[167,753,754,755,758,759,762],{},"Bagi orang awam, ini mungkin terdengar teknis. Namun, bayangkan ini seperti berpindah dari ",[211,756,757],{},"Telepon Kabel (Pages Router)"," ke ",[211,760,761],{},"Smartphone (App Router)",". Keduanya berfungsi untuk menelepon, tapi cara kerja dan fitur yang ditawarkan Smartphone jauh lebih canggih dan efisien.",[167,764,765],{},"Mari kita bedah perbedaannya agar kamu tidak tersesat!",[231,767],{},[234,769,771],{"id":770},"_1-mengenal-pages-router-si-klasik-yang-sederhana","1. Mengenal Pages Router (Si Klasik yang Sederhana)",[167,773,774,776],{},[211,775,747],{}," adalah sistem lama yang sudah digunakan Next.js sejak awal. Cara kerjanya sangat \"apa adanya\".",[278,778,779,796,802],{},[281,780,781,784,785,788,789,792,793,218],{},[211,782,783],{},"Struktur Folder:"," Kamu punya folder bernama ",[306,786,787],{},"pages",". Jika kamu membuat file ",[306,790,791],{},"tentang.js"," di dalamnya, maka otomatis website kamu punya halaman ",[306,794,795],{},"domain.com/tentang",[281,797,798,801],{},[211,799,800],{},"Logika:"," Satu file sama dengan satu halaman penuh.",[281,803,804,807],{},[211,805,806],{},"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.",[231,809],{},[234,811,813],{"id":812},"_2-mengenal-app-router-si-modern-yang-canggih","2. Mengenal App Router (Si Modern yang Canggih)",[167,815,816,818],{},[211,817,751],{}," diperkenalkan mulai Next.js versi 13 dan sekarang menjadi standar utama (rekomendasi Vercel). Ia membawa perubahan besar pada cara website memproses data.",[278,820,821,837],{},[281,822,823,825,826,829,830,833,834,218],{},[211,824,783],{}," Kamu menggunakan folder bernama ",[306,827,828],{},"app",". Setiap halaman memiliki foldernya sendiri, dan nama filenya wajib ",[306,831,832],{},"page.js",". Contoh: ",[306,835,836],{},"app/tentang/page.js",[281,838,839,842,843,846],{},[211,840,841],{},"Kelebihan Utama:"," Ia mendukung fitur bernama ",[211,844,845],{},"React Server Components",". Ini memungkinkan website kamu memproses data di server dengan jauh lebih cepat sebelum dikirim ke mata pengunjung.",[231,848],{},[234,850,852],{"id":851},"_3-perbedaan-utama-yang-perlu-kamu-tahu","3. Perbedaan Utama yang Perlu Kamu Tahu",[167,854,855],{},"Berikut adalah poin-poin mendasar yang membedakan keduanya:",[260,857,859],{"id":858},"a-struktur-navigasi-routing","A. Struktur Navigasi (Routing)",[278,861,862,875],{},[281,863,864,867,868,871,872,270],{},[211,865,866],{},"Pages Router:"," Nama file adalah nama linknya. (",[306,869,870],{},"about.js"," -> ",[306,873,874],{},"/about",[281,876,877,880,881,883,884,871,887,270],{},[211,878,879],{},"App Router:"," Nama folder adalah nama linknya, filenya harus bernama ",[306,882,832],{},". (",[306,885,886],{},"about/page.js",[306,888,874],{},[260,890,892],{"id":891},"b-layout-bertingkat-nested-layouts","B. Layout Bertingkat (Nested Layouts)",[167,894,895],{},"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.",[260,897,899],{"id":898},"c-server-components-vs-client-components","C. Server Components vs Client Components",[278,901,902,907],{},[281,903,273,904,906],{},[211,905,751],{},", 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.",[281,908,273,909,911],{},[211,910,747],{},", browser pengunjung masih harus melakukan banyak kerja keras untuk menampilkan website.",[231,913],{},[234,915,917],{"id":916},"_4-tabel-perbandingan-cepat","4. Tabel Perbandingan Cepat",[919,920,921,938],"table",{},[922,923,924],"thead",{},[925,926,927,932,935],"tr",{},[928,929,931],"th",{"align":930},"left","Fitur",[928,933,934],{"align":930},"Pages Router (Lama)",[928,936,937],{"align":930},"App Router (Baru)",[939,940,941,959,977,990,1003],"tbody",{},[925,942,943,949,954],{},[944,945,946],"td",{"align":930},[211,947,948],{},"Folder Utama",[944,950,951],{"align":930},[306,952,953],{},"/pages",[944,955,956],{"align":930},[306,957,958],{},"/app",[925,960,961,966,972],{},[944,962,963],{"align":930},[211,964,965],{},"Nama File Halaman",[944,967,968,969,971],{"align":930},"Bebas (",[306,970,308],{},")",[944,973,974,975],{"align":930},"Harus ",[306,976,832],{},[925,978,979,984,987],{},[944,980,981],{"align":930},[211,982,983],{},"Kecepatan",[944,985,986],{"align":930},"Cepat",[944,988,989],{"align":930},"Sangat Cepat (Optimasi Server)",[925,991,992,997,1000],{},[944,993,994],{"align":930},[211,995,996],{},"SEO",[944,998,999],{"align":930},"Bagus",[944,1001,1002],{"align":930},"Sangat Bagus",[925,1004,1005,1010,1013],{},[944,1006,1007],{"align":930},[211,1008,1009],{},"Kemudahan Belajar",[944,1011,1012],{"align":930},"Lebih Mudah",[944,1014,1015],{"align":930},"Sedikit Lebih Menantang",[231,1017],{},[234,1019,1021],{"id":1020},"_5-jadi-mana-yang-harus-kamu-gunakan","5. Jadi, Mana yang Harus Kamu Gunakan?",[167,1023,1024],{},"Di tahun 2026 ini, jawabannya cukup jelas:",[278,1026,1027,1033],{},[281,1028,1029,1032],{},[211,1030,1031],{},"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.",[281,1034,1035,1038,1039,1042],{},[211,1036,1037],{},"Gunakan Pages Router jika:"," Kamu sedang memelihara (",[223,1040,1041],{},"maintenance",") project lama yang sudah dibuat bertahun-tahun lalu, atau jika kamu merasa App Router terlalu rumit untuk kebutuhan website yang sangat-sangat sederhana.",[231,1044],{},[234,1046,431],{"id":430},[167,1048,1049],{},"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.",[167,1051,1052,1053,1055],{},"Jangan takut untuk mencoba ",[211,1054,751],{},". Meskipun strukturnya terlihat lebih banyak folder, ia sebenarnya dirancang untuk membuat hidup developer lebih mudah dalam jangka panjang.",[167,1057,1058],{},[223,1059,1060],{},[211,1061,1062],{},"Selamat mencoba mengeksplorasi folder 'app' di project Next.js kamu!",{"title":449,"searchDepth":450,"depth":450,"links":1064},[1065,1066,1067,1072,1073,1074],{"id":770,"depth":450,"text":771},{"id":812,"depth":450,"text":813},{"id":851,"depth":450,"text":852,"children":1068},[1069,1070,1071],{"id":858,"depth":456,"text":859},{"id":891,"depth":456,"text":892},{"id":898,"depth":456,"text":899},{"id":916,"depth":450,"text":917},{"id":1020,"depth":450,"text":1021},{"id":430,"depth":450,"text":431},"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.","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",{},{"title":22,"description":1075},"03gguZ8z_24yO64uCyqrxNusMfEI1siUAZR6YuG556I",1778254185333]