Halo semuanya Selamat datang kembali di channel VIP code studio bersama saya Habib Saiful di video kali ini kita akan memulai sebuah seri baru yang mungkin banyak juga di request nih ya setelah bikin riek itu banyak banget yang request playlist ini gitu ya karena memang saya pernah bilang bahwa riek itu saat ini setup yang terbaik adalah menggunakan salah satu frameworknya dan salah satu premok dari riek yang direkomendasikan untuk digunakan adalah next GS Ya nah tapi untuk video kali ini kita nggak akan ngoding dulu ya tapi kita coba cari tahu dulu apa itu next YS terus gimana cara implementasinya dan di belakangnya itu kayak gimana gitu ya Nah sebelum kita mengetahui next CS itu seperti apa kita berangkat dari sebuah masalah ya yaitu Bagaimana caranya untuk membangun sebuah aplikasi yang baik ya Nah ini mungkin pasti banyak banget sebetulnya di luar sana yang gua bikin aplikasi gitu ya bisa bikin aplikasi ya dengan berbagai macam fitur aplikasinya sih Jadi gitu ya tapi kita nggak tahu nih di belakangnya Apakah aplikasi itu dibangun dengan cara yang baik atau enggak gitu nah jika kita buka di dokumentasi next bahwa katanya untuk membangun sebuah aplikasi yang baik itu ada beberapa hal yang perlu diperhatikan ya yang pertama adalah user interface Nah jadi UI itu adalah bagian dari sebuah aplikasi yang mana menjadi titik awal user untuk mengakses atau berinteraksi dengan aplikasi tersebut nah hal tersebut tentu kita perlu pikirkan gitu ya bagaimana user bisa berinteraksi dengan nyaman dengan baik itu ya mudah untuk dipahami dan lain sebagainya tentu hal tersebut harus kita perhatikan ya mau nggak mau Kemudian yang kedua adalah dari sisi rooting ya routing ini adalah bagaimana cara untuk user melakukan navigasi ya atau perpindahan dari bagian aplikasi tertentu ke bagian yang lain atau mungkin Jika di dalam sebuah website dari sebuah halaman ke halaman yang lain selanjutnya ada data pachingnya Jadi bagaimana cara untuk mendapatkan data tersebut dari sumber data gitu ya Nah itu sesuatu hal yang perlu diperhatikan ketika kita membangun aplikasi kemudian rendering ya bagaimana sebuah aplikasi merender konten di dalamnya gitu ya Apakah dilakukan secara statik atau dinamik gitu ya kemudian yang perlu diperhatikan lagi adalah integration yang nggak mungkin untuk saat ini sebuah aplikasi bisa berdiri sendiri contohnya aja e-commerce gitu ya e-commerce itu dia butuh payment system kemudian dia butuh data ongkos kirim Misalkan ya kemudian Mungkin dia pasti di belakangnya ada konten management system hal-hal tersebut tentu membutuhkan integrasi ya apakah bisa hanya di handle sebuah aplikasi bisa tapi untuk saat ini itu mungkin tidak mudah untuk dilakukan sehingga kita harus bisa membuat aplikasi kita terhubung dengan hal ini kita bisa mengintegrasikan aplikasi kita dengan aplikasi yang lain kemudian yang perlu kita perhatikan ketika membangun aplikasi adalah infrastruktur di mana kita mau mendeploi aplikasi tersebut kemudian selanjutnya performance ya bagaimana kita membuat sebuah aplikasi itu optimal ketika dia digunakan oleh user kita nggak mau Kan user complain gitu ya bahwa performance dari aplikasi yang dibuat jelek gitu ya ngelag dan lain sebagainya kemudian skalability artinya dia mudah untuk dikembangkan ya Terutama ketika kita bekerja dengan tim Ya tentu kan mungkin Tim akan berganti ya tidak selalu developer itu menggarap aplikasi yang sama pasti Mungkin saja ada yang resign misalkan di sebuah tim Ya tentu akan muncul developer baru Nah kemudian juga mungkin data-data yang semakin berkembang ya Ataupun mungkin bisa saja traffic ya traffic itu banyaknya user yang menggunakan aplikasi itu juga tentu harus kita pikirkan bagaimana caranya sebuah aplikasi itu memiliki scalability yang baik dan yang terakhir adalah developer experience Bagaimana pengalaman developer tersebut dalam membangun sebuah aplikasi dan memintanya nah hal-hal tersebut itu sebetulnya bisa kita lakukan menggunakan dua cara bisa menggunakan native atau kita bisa memanfaatkan libraris dan frame kalau netip berarti kita ya bangun sendiri gitu ya dari nol misalkan kita gunakan javascript untuk membangun Semua sistem tadi gitu ya tapi kita juga bisa kalau pengen cepet pakai libraris dan Framework ya dan biasanya untuk libraris dan Framework itu sudah menginclotkan ya atau sudah ada di dalamnya terkait dengan hal-hal yang perlu diperhatikan tadi ya jadinya itu akan mempermudah kita sebagai developer untuk membangun sebuah aplikasi dan tentunya akan meningkatkan experience dari developer itu sendiri nah salah satu Framework yang bisa kita manfaatkan untuk untuk membangun fitur-fitur tadi adalah next GS ya jadi apa itu next GS secara mudahnya next GS Itu adalah sebuah Framework ya yang dibangun di atas riek gitu ya jadi bisa dikatakan dia adalah react Framework yang mana sifatnya fleksibel dan menyediakan fitur-fitur untuk membuat aplikasi web dengan cepat ya Nah sekarang Muncul pertanyaan baru gitu ya Apakah react aja itu nggak cukup Gitu ya kenapa sih next JS gitu ya Nah alasannya adalah react itu memang dia menyediakan fungsi-fungsi gitu ya yang bisa kita manfaatkan untuk membangun UI Nah tapi dia sifatnya UN opinion artinya ya Kita sebagai developer harus menentukan kembali ya misalkan untuk sistem rootingnya itu kita harus pakai rec router dan lain sebagainya dan akhirnya ya Banyak sekali ekosistem riaknya yang dikembangkan oleh gitu ya dan perkembangannya tentu sangat cepat hal tersebut tentu hal yang positif banyak sekali pilihan tapi di satu sisi ketika kita nggak ngerti set up nya ya bukannya malah jadi bagus malah bikin programmernya bingung gitu ya untuk melakukan setupnya Seperti apa Nah sehingga untuk membangun sebuah aplikasi itu pakai react kalau secara utuh pasti butuh effort ya terutama untuk mengkonfigurasi alat dan juga mungkin solusi-solusi yang nantinya akan diberikan untuk aplikasinya gitu ya Nah solusinya untuk meng-handle hal tersebut kita bisa pakai yang namanya next DS ya Di mana next DS itu menyediakan tools dan konfiguration yang mana bisa kita manfaatkan untuk mendevelop sebuah aplikasi menggunakan react dimana dia menyediakan struktur fitur optimasi Nah kalau kita lihat di sini sjs dia menyediakan sistem UI menggunakan react kemudian yang dia punya klient side rendering server side rendering ya kemudian sistem routing data facing dan lain sebagainya Nah sekarang bagaimana next DS ini bekerja ya kita berangkat dari invironment ya Jadi biasanya ketika kita mendevelop sebuah aplikasi itu invironment terbagi menjadi beberapa bagian ya Ada development kemudian ada production atau bahkan kalau di industry itu ada juga staging ya nah jadi kalau development adalah fase di mana developer biasanya mendevelop aplikasi dan itu biasanya terjadi di lokal server development kita gitu ya kemudian kalau production itu adalah aplikasi yang siap digunakan oleh user ya jadi bener-bener sudah siap digunakan di fase development next DS itu mengoptimalkan pengalaman developer dimana dia menyediakan live script Vaseline dan fitur yang lain kalau dia di dalam mode development ngemanjain developer ya Nah sebaliknya ketika dia dirubah menjadi Mode production maka next JS akan mengoptimalkan pengalaman dari and user ya artinya dari pengguna aplikasi itu sendiri di mana dia akan mengubah setiap kode agar memiliki performance yang baik gitu jadi ketika development dia manjain programmer ketika production dia menjahitnya and user Wah ini keren banget nih ya hal tersebut bisa terjadi karena next GS menggunakan s double UC ya Di mana dia adalah sebuah singkatan dari Speedy web compiler ya Yang mana dia sebagai compiler yang ditulis dengan bahasa ras ya yang dapat digunakan untuk melakukan compiling bundling Mini fying dan consting ya Nah ini istilah-istilah ini akan kita coba pelajari di video kali ini gitu ya buat teman-teman yang masih bingung nggak papa Nah jadi kalau kita buka di website next CS kemudian Scroll ke bawah itu ada katanya next GS ini dia dibangun ya menggunakan react tentunya sebagai user interface kemudian dia juga menggunakan Turbo pack ya mungkin teman-teman udah pernah belajar tentang yang namanya web pack gitu ya merupakan modul bundler yang biasanya digunakan untuk saat ini ada muncul baru lagi yaitu Turbo pack namun di sini masih versi beta ya untuk teks js13.4 untuk Next Yes terbaru untuk saat ini gitu Ya nah tapi ke depannya ini bakal keren banget gitu ya karena dia akan semakin optimal untuk javascript ya dan type script pastinya kemudian dan tadi ya yaitu swc ya atau es double UC atau Speedy web compiler Nah kita bahas satu-satu pertama dari compiling jadi compiling ini adalah proses komputer mentransformasi kode dari satu bahasa ke dalam bahasa lain atau versi lain dari bahasa tersebut contohnya di sini Misalkan ada sebuah kode ya ini bisa kita baca ya sebagai developer ya mungkin teman-teman kalau udah belajar yek pasti ngerti ini yaitu kita mau bikin sebuah komponen ya atau sebuah pages di sini lebih tepatnya menggunakan functional componen yaitu home page yang meritten sebuah Deep ya Nah ini kan bisa kita pahami ya sebagai developer mau itu ditulis dalam Sintak GSX mau ditulis dalam Sintak type Creep maupun misalkan javascript modern ya jadinya kan kita merasakan bahwa Oh mudah sekali untuk mendevelop sebuah aplikasi gitu Ya nah tapi bahasa tersebut itu perlu dikompilasi gitu ya ke dalam javascript Supaya apa supaya browser paham gitu itu tuh Sintak apa gitu jadi dia harus di convert dulu ya Kerja fascript yang mana javascriptnya itu bisa dipahami oleh browser Nah jadi walaupun kita tulis dalam bahasa type script misalkan itu dia tetap nantinya setelah di compile bentuknya akan menjadi javascript juga gitu ya supaya dia bisa dipahami oleh browser nah kemudian proses setelah melakukan compiling dia akan melakukan yang namanya minifying ya Di mana proses ini adalah menghapus formatting dan komentar-komentar yang tidak akan digunakan oleh browser gitu ya tanpa mengubah fungsionallitas kode ya walaupun bentuk kodenya berbeda tapi fungsinya sama aja gitu ya Nah tujuannya untuk apa untuk meningkatkan kinerja dari sebuah aplikasi dan tentunya untuk mengurangi ukuran filenya gitu Ya namanya juga minifying artinya dia akan membuat filenya jadi Mini tapi fungsinya sama aja gitu nah kurang lebih seperti ini setelah tadi kodenya di compile dia akan menghapus semua spasinya gitu ya ketika dia masuk ke dalam browser ya jadi dia melalui minifire Nah mungkin juga sebetulnya teman-teman pernah lihat juga kalau menggunakan CSS ada misalkan style dot Mi CSS Nah itu juga sama dia di minify ya untuk kodenya Supaya apa supaya lebih efisien lebih meningkatkan kinerja dan juga mengurangi ukuran file pastinya setelah dilakukan miniying next GS akan melakukan proses bundling ya dimana proses banding ini adalah menggabungkan file ke dalam bundle yang kemudian nanti akan dioptimalkan untuk browser yang mana Tujuannya adalah untuk mengurangi permintaan file saat pengguna mengunjungi halaman web gitu ya kebayang kan kalau misalkan kita gitu Ya bikin sistem komponen ya misalkan aja kita bikin homepage di dalamnya ada number ada Hero section ada bagian about company misalkan terus ada testimoni ada kontak ada footer gitu ya Nah itu kebayang kalau browser harus request filenya satu-satu gitu lama banget gitu ya Dan akhirnya dia dibandela dalam satu buah file yang besar yang mana isi itu biasanya ada CSS dan Cs nya gitu ya Nah setelah dibandrol kemudian next akan melakukan yang namanya code splitting artinya setelah dibungkus jadi satu bandel besar gitu ya dia akan pisah-pisah lagi jadi bagian-bagian yang lebih kecil gitu ya Yang mana nantinya mungkin bagian-bagian tersebut akan dibutuhkan oleh setiap entry point entry point di sini adalah url biasanya ya yang tujuannya untuk meningkatkan inisial load time ya jadi ketika kita membuka sebuah halaman itu kita hanya gunakan file-file yang dibutuhkan oleh halaman tersebut gitu ya kita nggak perlu ngeload untuk yang halaman lain ketika halamannya dibuka itu akan jauh lebih cepat nah hal tersebut ketika kita tanpa menggunakan Framework ya Katakanlah menggunakan native itu mau nggak mau kita harus set up kata kalian misalkan menggunakan web pack ya Nah berarti kita harus set tuh ya mau nggak mau tapi kalau pakai next JS developernya nyantai nggak perlu ngeset up lagi yang begini ya next JS udah ngasih ya konfigurasinya Dan kita bisa otak-atik konfigurasinya sebetulnya gitu ya untuk melakukan hal tersebut nah tapi walaupun kita nggak otak-atik konfigurasinya secara default pun next DS sudah memberikan performance yang cukup baik untuk meng-handle hal-hal tersebut gitu Jadi developernya udah enggak usah capek-capek lagi ngeset up lah apalagi sekarang paket Turbo pack ya kan berarti kita harus belajar lagi Turbo pakan mau nggak mau nakal pakai next yes ya kita nggak perlu untuk melakukan setup hal tersebut ya Sehingga proses development akan jauh lebih cepat kita akan bahas tentang kecantikan dari next YS Nah kalau Sebelumnya saya pernah bahas tentang kecantikan kalau Kecantikan itu kan dia bisa untuk membangun komponen yang merepresentasikan bagian dari sebuah UI kemudian dia bisa di Re yang mana itu hanya menggunakan javascript function Tapi dia bisa mengembalikan nilai berupa html ya atau disebutnya sebagai Sintak CSX gitu ya jadi itu kalau beauty of Nah kalau beauty of next JS atau kecantikan dari next JS itu agak berbeda kecantikannya Seperti apa kita akan coba bahas kupas ya sedikit demi sedikit jadi kita mungkin harus kenalan dulu sama yang namanya build time dan Run time ya Jadi kalau build time itu adalah mengacu pada waktu dimana saat aplikasi di built ya artinya adalah ketika kita mentransformasi kode dari tadinya di development in Finance menjadi production infragment hingga akhirnya aplikasi itu siap digunakan Nah itu disebutnya adalah build time kalau rantai itu mengacu pada waktu saat aplikasi sudah selesai di build dan di deploy artinya apa yang diakses oleh user berada yang ada di dalam rantai ya Nah kalau ketika aplikasinya di build dari development ke production itu artinya di build time ya Nah kemudian yang perlu kita pahami adalah client dan server kalau client itu merujuk ke browser pada perangkat pengguna ya mengirimkan request ke server yang kemudian diterjemahkan menjadi UI Nah kalau server dia mengacu pada perangkat yang menyimpan kode aplikasi kemudian menerima permintaan dari client melakukan komputasi dan juga mengirimkan kembali Respon yang sesuai ya Jadi intinya adalah kalau klient itu ya komputer yang mengakses aplikasinya kalau server adalah komputer yang menyimpan aplikasi tersebut gitu ya Nah hal ini akan berhubungan dengan yang namanya rendering Nah jadi rendering ini adalah proses next GS mengkonversi code menjadi representasi HTML dari sebuah UI yang dapat dilakukan di sisi client ya tadi Berarti di sisi komputer user ataupun di server Gitu ya dan dia dapat terjadi pada saat Bill time maupun Run time Nah ada beberapa macam yang dimiliki oleh next GS ya yang pertama ada server side rendering atau ada juga yang menyebutnya adalah free rendering kemudian ada Static side Generation dia sama bagian dari pre rendering ya Ada juga yang dinamakan client side rendering Nah sekarang Bedanya apa kita coba lihat satu-satu ya Mulai dari client side rendering dulu jadi clientren ini dia metode rendering yang mana pengambilan data eksternal yang artinya ketika kita face data dari FPI atau dari Back at dan juga transformasi kode menjadi representasi HTML dari sebuah UI itu terjadi di sisi client ya atau di komputer user gitu ya nah jadi yang dikirimkan dari sisi server Ya hanya inisial html aja jadi dia bentuknya hanya strukturnya saja terus ui-nya juga masih kosongan nantinya akan di rendering di sisi client gitu nah sementara kalau kita bandingkan dengan free rendering ya itu dilakukannya di sisi server jadi tadi ada dua metode ya itu Static side Generation dan juga share persaigling yang mana keduanya merupakan sama-sama free rendering gitu ya Di mana Kalau free rendering itu pengambilan data eksternal gitu ya koneksi data ke BKN terus transformasi kode jadi UI gitu ya itu terjadi sebelum dikirimkan ke client artinya Apa artinya terjadinya di sisi servernya gitu ya Nah kemudian setelah dia siap ya data siap kemudian html juga strukturnya sudah lengkap ui-nya juga sudah terbentuk baru dia dikirimkan ke sisi client ya Nah setelah sudah dikirimkan klien akan menggunakan HTML itu untuk menampilkan halaman tapi dia belum interaktif ya artinya kalau misalkan ada button itu buttonnya belum bisa diklik gitu ya tapi halamannya udah tampil nih strukturnya udah kelihatan gitu ya Nah kemudian react akan melakukan proses yang namanya hydration ya jadi dia bakal pakai data-data yang sudah di page dulu gitu ya oleh FPI di patch DC server dan javascript javascript yang dikirimkan dari sisi server tersebut kemudian dia bakal bikin Si komponen-komponen tadi yang belum interaktif menjadi interaktif gitu ya nah jadi prosesnya terjadi di sisi server ya bukan di sisi client Nah sekarang Bedanya apa antara server side rendering dan Static side Generation ya Nah yang membedakan server set rendering dan Static side Generation adalah dari sisi rantai dan build time kalau server side rendering itu dilakukan saat rantai ya jadi htmlnya di generate kemudian html data dan javascript dikirimkan ke client itu pada saat rantai artinya aplikasinya sudah berjalan gitu ya Nah kalau Static Generation itu dia dijalankannya pada saat Deal time gitu jadi aplikasinya dibuat dari development menjadi production invidermen terus dia akan melakukan page data kemudian nge-build UI dan lain sebagainya Jadinya apa jadinya kontennya sifatnya statis ya jadi ketika kita misalkan ya punya blog ya terus kita build aplikasinya misalkan ada 10 artikel terus kita nulis lagi di CMS artikel baru kalau pakai Static side Generation kita buka ya di web kita artikelnya nggak nambah tuh ya tetap aja 10 karena dia sifatnya statis Ya apapun yang dilakukan di Bill time itu nggak akan bisa ke update lagi gitu nah tapi kalau kita pakai server side rendering itu kita nulis artikel baru di CMS datanya akan bisa langsung di paching ulang oleh server Gitu ya sehingga ketika kita nulis artikelnya artikelnya akan bisa dimunculkan di dalam website kita gitu nah dari situ perbedaannya gitu ya Nah kalau misalkan tadi antara klient itu terletak di sisi mana dia melakukan transformasi kode paching data gitu ya bisa di sisi client ataupun di server Gitu ya Nah kalau misalkan server dan Generation terletak pada waktunya gitu ya Apakah pada saat di Bill time atau pada saat dirantai dan hal ini tentunya akan menentukan Bagaimana sebuah website itu performancenya bisa kita atur-atur gitu ya Misalnya gitu ya kita membutuhkan data yang cukup besar seperti sistem blog di dalam website kita itu sangat tidak cocok kalau kita pakai cliensan rendering karena yang bekerja jadinya komputer kita bukan komputer server Ya itu kan kebayang lama tuh ya nge-page data gitu untuk blognya nah sementara kalau pakai server side rendering Yang kerjanya server dan itu tentu akan meningkatkan performance kalau temen-temen baca di beberapa dokumentasi juga kalau mau bikin sistem belum pasti harus pakai server saya rendering ya mereka akan selalu menyarankan hal tersebut supaya performance-nya makin baik ya dan itu akan ngaruh banget gitu ya ke page speed index terus ke Sio ya Jadi hal tersebut bisa kita handle lah gitu ya menggunakan server sederhana kalau misalkan tidak memerlukan data yang cukup besar gitu ya tidak terlalu kompleks ya bisa menggunakan client saya rendering atau kalau misalkan datanya statis gitu ya cukup sekali di generate itu ya gunakan Static side Generation nah kecantikan dari next JS adalah kita bisa menentukan untuk halaman yang mana yang mau di render secara server site kemudian halaman Mana yang mau di render secara klient sign halaman yang mana yang mau di render secara statik dan itu bisa kita atur per halaman misalkan halaman home Saya mau client saya sendiri di halaman blog Saya maunya server Nah itu bisa kita atur per halaman seperti itu gitu ya dan hal tersebut tentunya menjadi sebuah kecantikan dari next GS gitu ya dan Selain itu sebetulnya masih banyak banget fitur-fitur yang lain yang bisa kita manfaatkan ketika kita menggunakan atau bekerja dengan next sekarang Saya pengen ngajak temen-temen untuk melihat website-website yang sudah menggunakan atau mengimplementasikan next YS di dalam codingan mereka ya teman-teman bisa buka di dalam website nexjs nya ya Ada section showcase di sini ya Atau page showcase di dalamnya adalah berisi tentang website-website yang sudah menggunakan next GS ya kalau kita lihat di sini disajikan statistik ya di mana next ini merupakan repository Nomor 14 ya paling besar digit hub kemudian dia Framework nomor 1 dan digit hub juga sudah mendapatkan lebih dari 100.000 start ya dan kalau kita Scroll lagi di sini mid thousand of beautiful website build with next JS by versal ya jadi next ini adalah buatan version ya makanya jangan heran kalau misalkan sekarang react itu banyak banget developernya juga berasal dari Faisal gitu ya karena memang mereka saling terintegrasi satu sama lain gitu dan ya banyak banget sebenarnya developer developer di Meta atau Facebook ya juga developer di parcel gitu ya Nah kalau kita lihat di sini ada netflix Jobs kemudian Tik Tok ternyata dibangunnya pakai next ya untuk websitenya target target ini e-commerce ya yang cukup terkenal di luar sana Nike HBO type form dan masih banyak lagi kalau teman-teman Scroll ke bawah ya ini kan brand-brand yang sangat-sangat besar gitu ya banyak yang pakai next GS ya yang pasti mereka alasannya ya tadi ya banyak banget kelebihan-kelebihan dari next GS sendiri kemudian juga mereka yang mungkin sudah menggunakan arsitektur react dari awal ya mereka tentunya akan upgrade ke next YS karena tentu dari sisi fungsionallitas jauh lebih banyak dan juga jauh lebih mempermudah developer ya ketika proses development berlangsung dan hal tersebut ya kalau bikin developer Happy developernya gampang developnya ya pasti delivery dari sebuah aplikasi itu akan jauh lebih cepat ya terus juga ya performancenya meningkat kualitas skornya pun akan jauh lebih meningkat pertanyaannya sekarang udah siap belum kita ngoding pakai next ya kalau udah siap kita bakal coba untuk melakukan coding di video berikutnya ya biar nggak ketinggalan kalian bisa subscribe kemudian nyalain lonceng notifikasinya ya juga kalian bisa tulis di komen kira-kira kalian pengen dibahas apa nih di seri next ini gitu Ya siapa tahu nanti bisa saya sisipkan untuk video-video request dari teman-teman semua dan masih relevan Yang pastinya dengan next DS like kalau kalian suka dengan video ini dan kita ketemu lagi di video berikutnya untuk belajar coding bareng materi next JS