.0cbf2116.png)
Chit Chat
Halo semuanya, semoga pembaca senantiasa diberi kesehatan dan rezeki yang berlimpah dan yang lagi mudik, semoga dilancarkan sampai tujuan dan bertemu dengan sanak saudara yang ada didesa.
Pada kali ini, saya akan membagikan Petualangan development saya, saya saat ini sedang mempelajari tentang Next.JS, pada Dev Journey saya yang sebelumnya Dev Journey #1, saya telah mempelajari React Native yang pada awalnya saya ingin mempelajari mobile development menggunakan React yang sebelumnya saya menggunakan Flutter.
Karena saya masih lemah pemahaman dibagian React dan Turunannya (ReactJS, React Native), saya pun mendalami ReactJS terlebih dahulu, pada dasarnya React adalah sebuah Alat untuk membuat website berbasis JavaScript, sayapun mempelajari apa itu component, passing data from component, dan hingga useState dan useEffect yang membuat Looping berkali kali saat melakukan Request.
Berikut adalah web dari hasil mempelajari ReactJS yang bisa saya tampilkan pada gambar dibawah, yah meskipun terkadang response dari API tidak muncul dan tidak memberi Response yang diharapkan, contoh disini adalah menggunakan PokeAPI.
Sayapun melihat di website resmi ReactJS berdasarkan dokumentasinya bahwa sangat disarankan untuk menggunakan framework ketimbang harus menggunakan hanya ReactJS (sumber), dan salah satu yang disarankan adalah Next.JS
Dan akhirnya pun saya memutuskan untuk mempelajari Next.JS, yang saya ketahui dari Next.JS adalah ia sifatnya adalah Server Side Rendering, Server Side Rendering datanya diproses dan diolah dulu di server dan Client hanya menerima hasil pemrosesan data berupa tampilan, untuk lebih jelasnya anda dapat mempelajari di Mozilla Developer Network: Server Side Rendering atau di FreeCodeCamp: SSR vs CSR Explained
Setupnya cukup mudah dengan menggunakan perintah pada Command Prompt / Terminal seperti berikut
npx create-next-app YourFolderProject
Akan tetapi, sebelum menggunakan perintah tersebut, anda perlu untuk menginstall NodeJS versi yang disarankan oleh NextJS, pada saat saya menulis artikel ini, NextJS membutuhkan versi 18.17 atau yang terbaru
Dan segala tutorial untuk tatacara installasi ada di link berikut Getting Started: Installation | Next.js. Dikarenakan saya memilih untuk menggunakan TypeScript, sayapun harus mempelajari lagi, singkatnya adalah TypeScript adalah versi Strict dari JavaScript, dikembangkan oleh Microsoft untuk mengatasi permasalahan inkonsistensi JavaScript yang biasanya muncul di Meme Pemrograman.
Sayapun mempelajari hal baru yang mana properties pada ReactJS yang akan digunakan untuk menampilkan data dari Component yang lain, haruslah diJelaskan maksud dari properties tersebut
Inside of Navbar Component
Navbar Component
Contoh diatas adalah ketika saya ingin melakukan penambahan Navigation Item pada Navigation Bar sesuai dengan penambahan properti navbarlist yang bisa saya atur sesuai dengan keinginan, pada gambar di Inside of Navbar Component saya harus mendeklarasikan terlebih dahulu apa isi NavbarData dimana NavbarData berisi Array dari NavItem, dan NavItem berisi title, link, dan icon yang mengarah ke Bootstrap Icons untuk menampilkan Icon pada web dan datanya disupply pada saat pendeklarasian Navbar Component.
Berikut adalah hasil percobaan membuat NextJS App pertama
Oh iya, saya juga membagikan source code ini di github saya, silahkan dipakai dan dikreasikan menurut anda
Techstack yang digunakan adalah
Saya kira demikian untuk Dev Journey ke-2 kali ini, Terima Kasih!