Halo semuanya Selamat datang kembali di channel Vape code studio bersama saya Habib saepuloh di video kali ini kita akan melanjutkan seri next JS ya Di mana kita akan coba Pelajari tentang konsep routing menggunakan folder pages ini dan juga kita akan coba untuk membuat sistem layout think ya di dalam project next GS kita Nah pertama yang perlu kita perhatikan adalah folder pages ya jadi ketika kita menggunakan folder pages sebagai routing utama ya atau pages router itu apapun yang ada di dalam folder pages ini akan menjadi rooting ya misalkan ya kita gunakan indeks dot tsx buka di browser ya kita coba jalankan NPM rendah Nah kalau kita buka localhost 3000 yang pertama kali diakses adalah indeks.sx ini gitu nah sekarang saya mau coba Bikin sebuah file ya misalkan about dot TSS di Saya mau coba cons about page sama dengan eropaction kemudian kita return misalkan di sini Div di dalamnya ada Div lagi ya biar ini rapi aja kemudian ada about page misalkannya saya tulis seperti ini atau Saya mau berikan di sini mungkin H1 aja ya biar kelihatan tulisannya nah terus saya tinggal export default about page ya Nah ini bisa gunakan Ero function seperti ini gitu ya atau gunakan function seperti ini ya jadi export defaultnya bisa secara langsung ya Nah kalau kita coba sekarang ya flash about Nah ya dia muncul about page ya karena file dengan nama about itu ada di dalam pages ya jadinya dia akan mengakses ke about dot tsx ini gitu ya Nah kalau misalkan saya sekarang akses ke yang gak ada gitu ya misalkan di sini profile nah nggak ada dia langsung mengarah ke 4 04 gitu ya Nah ini kita nggak perlu set up ya kalau pakai kita set up halaman 464 nya gitu ya terus kita set up satu persatu routingnya about ini access komponen atau PJS yang mana gitu ya ribet next JS mempersingkat itu Ya kita cukup bikin aja nama filenya apa dia langsung otomatis jadi routing ya Nah Selain Kita bisa memasukkan file seperti ini Kita juga bisa bikin folder ya di dalam pagesnya misalkan ya saya nggak mau si about ini disimpannya seperti ini jadinya kelihatan berantakan banget nanti kalau misalkan udah banyak banget pagesnya gitu ya Saya mau masukkan dia ke dalam sini Jadi di dalam about Nah terus saya coba tarik about ini kita masukkan ke dalam folder about ya Nah about the txx ini saya ubah namanya jadi index.tsx ya Nah sekarang kalau saya akses ke flash about hasilnya sama aja ya tapi sekarang dia udah ada di dalam foldernya kalau misalkan saya ubah lagi yang ini seri ini menjadi about ya terus saya buka Kenapa karena nama filenya bukan indeks.tsx ya Jadi kalau saya mau akses ke filenya saya harus akses ke Slice about lagi jadi Slice about Slice about ya ini akan sangat berguna misalkan Saya punya ya sebuah halaman namanya setting ya kita coba bikin ya ini kita coba kembalikan dulu jadi index ya indeks.psx kemudian saya mau bikin sebuah folder namanya setting di dalamnya misalkan Saya mau bikinnya adalah setting user ya kemudian misalkan yang kedua adalah setting app ya dan lain sebagainya nah ini misalkan aja ya saya bikin user setting page gitu ya saya tinggal return di sini Misalkan Div terus di sini H1 misalkan di sini user setting gitu ya terus saya export default user setting page ini bisa kita copy aja ya saya mau copy Oh ini saya bikin di app Ya nggak papa kita copy ke user nah yang ini kita Ubah aja jadi appsetting page ya Nah yang ini sama juga ya app setting yang ini kalau temen-temen barusan bingung kenapa kok saya langsung bisa berubah tiga-tiganya itu saya short satu terus saya gunakan control D atau komen di kalau di MacBook ya itu langsung akan muncul 3 kayak gini ya untuk kursornya dan ini bisa langsung kita edit sekaligus gitu nggak usah capek-capek satu-satu ngedit Nah kalau sekarang saya akses ke setting aja itu nggak mau ya tapi kalau saya akses ke flash setting user nah muncul user setting saya akses ke setting masuk ke appsetting ya nested routing ya dia menjadi sebuah routing bersarang ya ketika kita bikin sebuah folder kayak gini kita tinggal bikin aja filenya ya jadinya ya nanti akan menjadi sebuah nesting bersarang gitu nah di dalam setting Apakah kita masih bisa bikin folder bisa ya misalkan Saya mau pisahkan lagi jadi user gitu ya Nah ini saya masukkan ya ke dalam user saya ubah jadi index.tsx ya indeks.sx nah saya akses sekarang ke APP ini masih ada di dalam folder setting ya belum saya masukkan ke folder yang lain kemudian saya cek Sekarang di user Nah ya dia bisa diakses juga kalau kita mau bikin folder lagi di dalam user bisa ya misalkan setting di sini adalah password misalkan ya Nah di sini saya mau bikin lagi sebuah file misalkan index dot tsx ini makin dalam banget ya sistem rooting kita misalkan user settingnya mau passwordnya doang gitu ya Nah di sini Misalkan berarti namanya adalah user password ya user password setting page gitu nah ini saya masuk lagi sekarang ini kan setting Splash user Slice password Nah bisa sekarang masuk ya jadi dia sistemnya nester routing ini kalau pakai riak kebayang kita harus setup satu persatu ya lama banget di sini kita cukup bikin file aja ya dengan nama routingnya apa atau kita bikin folder ya tapi di dalamnya gunakan file index dot PSX ya tinggal bikin folder aja gitu ya Nggak perlu kita set up lagi laravel itu kita harus setup ya rutenya gitu untuk mengarahkan ke controller biasanya gitu Nah kalau di sini kita cukup bikin folder aja ya selesai ya sama gitu ya ini ada Hello Terus kalau misalkan kita mau bikin misalkan FPI produk ya udah tinggal bikin folder produk di dalamnya ada index dotest misalkan gitu ya atau langsung bikin file produk itu sama aja gitu Ya nah tapi kita nggak akan bahas dulu nanti kita akan bahas di video-video berikutnya ya jadi itu untuk routingnya bukan hanya rooting aja ternyata bisa nesting juga ya atau dibikin sebuah struktur bersarang gitu ya di dalam folder pages ini Nah selanjutnya yang saya mau Perlihatkan di sini ada yang namanya Dynamic routing ya Kita pernah pelajari juga di dalam proyek yaitu adalah membuat routing secara dinamis biasanya untuk detail produk misalkan dan lain sebagainya nah ini kita bisa coba sekarang saya mau bikin sebuah folder sekarang yaitu produk ya terus di dalamnya ada index.tsx gitu ya ini kita bikin dulu aja ya produk page kemudian saya return misalkan di sini terus H1 produk page terus saya ekspor default produk page ya Nah seperti ini kemudian setelah itu saya akan coba sekarang bikin untuk Dynamic routingnya ya di dalam folder produk ini jadi saya mau misalkan ya kita coba akses dulu produk Nah ini kan produk page terus saya mau masukinnya slash 1 misalkan gitu Ya baik ini kan masih belum ada ya saya mau bikin Dynamic routing atau misalkan di sini juga bukan satu Misalkan di sini sepatu baru gitu ya lagnya ya Nah ini kita cukup bikin sebuah file lagi ya kemudian kita gunakan kurung siku seperti ini ya dot tsx nah yang ada di dalam sini adalah selatnya Nanti bisa kita misalkan alias di sini ya Atau mau ID juga boleh gitu ya atau misalkan kalau blog itu berarti kayak gini bisa gitu ya bebas apapun itu dan itu akan jadi parameter nantinya untuk mengambil data yang ada di dalam slidenya Nah di sini Misalkan saya berikan aja ID gitu ya di sini nah saya tinggal cons misalkan detail produk page kemudian di sini berarti return Deep kemudian H1 misalkan detail produk terus saya mau bikin di sini nanti kita ambil secara dinamis misalkan produknya apa gitu ya Nah terus saya ekspor default detail produk page nah seperti ini ya untuk detail produknya sekarang kalau saya akses ya gunakan slide seperti ini nah dia akan langsung otomatis tapi kita belum ambil nih ya untuk selanjutnya atau id-nya ya yaitu sepatu baru ini gitu Nah untuk ngambilnya gimana nah jadi di dalam next ini untuk mengambil ID tadi kita bisa gunakan fitur router ya Nah tapi di sini dia juga punya sebuah hooks ya yang bisa kita manfaatkan namanya user nanti akan kita coba pelajari lebih lanjut ya terkait dengan hoax yang dimiliki oleh next router ini gitu ya Nah di sini saya tinggal gunakan aja construter sama dengan use router Terus kalau saya coba console nah ini saya refresh nah muncul sekarang ya ada di konsolnya kalau teman-teman install consol Ninja atau kalau temen-temen mau buka lewat browser juga boleh ya lewat inspek ini terus buka untuk tab konsolnya ini saya coba rapikan dulu saya refresh nah ini ya ada nih ya untuk apa yang ada di dalam routernya dan kita bisa ambil querynya ya dan ada ID di sini ya ada sepatu baru gitu nah kita bisa ambil sebetulnya ini juga bisa kita di structuring aja ya misalkan di sini query berarti ya terus kita ambil aja berarti di sini query.id ya Nah sekarang ada sepatu baru gitu ya nama produknya dan berarti kan Id ini bisa kita nanti gunakan untuk data packing ke FPI ya Nah kemudian misalkan di sini saya ubah jadi baju gitu ya Nah produknya jadi baju gitu dia dinamis Nah untuk querynya itu mengikuti dari nama filenya kalau di sini ID kalau saya ubah jadi di sininya misalkan produk ya di sini saya akan ubah juga ya kalau kita gunakan seperti ini ya kosong nggak ada apa-apa tapi kalau saya ubah juga di sini jadi produk nah muncul baju saya ubah di sini Misalkan baju baru Nah gitu ya jadi itu adalah sedikit terkait dengan next router nah jadi itu untuk Dynamic routing kemudian Sekarang saya mau coba untuk setup layout thing ya Nah di sini saya akan coba untuk bikin sebuah folder baru ya di dalam src kita bisa bikin folder namanya komponens ya ini konsep Atomic design sama seperti dengan tutorial di react sebelumnya ya kalau teman-teman belum paham apa itu Atomic desain saya sarankan untuk nonton dulu video terkait dengan atau mic desain di series ya di sini kita bikin komponen di dalam komponen itu mungkin ada Elements ya kita bikin aja sekarang strukturnya ya Element terus di dalamnya mungkin punya fragment ya biasanya kemudian ada Layout ya nah seperti ini terus di dalamnya Saya mau bikin beberapa layout misalkan not bar gitu ya nanti mungkin ada footer gitu ya tapi itu belakangan aja saya bikin dulu nak bar di sini Misalkan saya tulis indeks dot tsx ya ini sama saja konsepnya seperti di dalam reak GS ya kita bikin Akbar terus saya mau bikin beef misalkan di sini Deep lagi ya misalkan Mabar gitu ya terus saya mau export default Nabar ya terus saya mau kasih styling sedikit ya ini kita bisa gunakan langsung di sini ya ini kita gunakan secara global aja ya nah kalau misalkan Global berarti kita akan memanggil file yang ini ya tapi kan saya nggak mau ya setup ini semuanya kita masukkan kita coba Hapus aja dulu ya yang mungkin tidak akan kita gunakan ya yang root ini saya mau coba Hapus aja terus ini bintang biarkan html dan body biarkan juga nah yang body ini sampai ke bawah saya akan hapus atau mungkin yang ini bisa lah yang ini ya ini biarkan nah yang ini saya mau hapus nah kurang lebih seperti ini terus saya mau kasih styling di sini Misalkan nak bar ya nama kelasnya Terus tinggal saya panggil di Global sini dot navbar ya ini kalau masih bingung teman-teman nggak papa nanti kita akan bahas terkait dengan CSS ya di dalam video terpisah ya nanti jadi supaya lebih paham lagi pemanggilan CSS di dalam Framework next CS nah ber tinggal saya gunakan display flags ya boleh di sini with misalkan 100% gitu ya terus haidnya 70 pixel terus saya mau kasih background color misalkan hastag 00 aja ya warna hitam kemudian Sekarang saya mau panggil ini berarti di dalam adjust misalkan ya di sini berarti saya panggil ini bisa saya tambahkan aja langsung di sini ya saya panggil nabbar nah jangan lupa import dari komponen layout Nah ini bisa kita gunakan add ya untuk mengarahkan langsung ke komponen ya Atau bisa juga kita mundur kayak gini ya itu sama aja ya nah ini tapi kayaknya ada error di nabbar ya kita perlu cek nah ini ya ternyata saya lupa menambahkan return di sini ya Nah ini baru bener nih ya nah jadi udah nggak ada errornya lagi ya Ini yang Inter mungkin kita hapus dulu ya nanti kita akan pelajari terkait dengan konsep pemanggilan font di dalam next GS ya supaya fontnya itu lebih optimal gitu ya ini jadi bisa saya hapus dulu cukup seperti ini ya impor dari navbar Ya tinggal kita Arahkan add komponents atau mau mundur juga bisa kayak gini gitu ya Sama aja Nah sekarang saya mau coba masuk ke localhost bar kita coba berikan styling sedikit ya Oh ini tidak terpanggil ya Ternyata kita mematikannya ya di video sebelumnya yaitu ada di @sx ini nah ini Saya nyalakan dulu ya nah akan muncul sekarang ya ini kayaknya terlalu tinggi ya kalau 70 pixel ya kan 10 pixel Oke terlalu rendah 30 pixel nah ini kayaknya cukup terus saya mau ubah tulisannya color misalkan di sini kita bikin warna putih terus saya mau coba ubah dulu sedikit di body ini ya phone family misalkan kita pakai areal aja dulu ya Nah seperti ini terus Sinar ini saya mau kasih display Plex Oh ternyata udah line item center terus saya kasih padding misalkan 5% ya untuk kiri kanannya nah seperti ini Ya kurang lebih terus saya mau coba sekarang panggil lagi nakbar ini kalau saya masuk ke produk misalkan gitu ya Nah ini kan nggak ada kita harus panggil lagi berarti kan not barnya di dalam produk Ya tapi kan itu ribet gitu nah kita coba pindahkan yang nabber ini ya zakat yang ini mungkin saya hapus saya pindahkan ke @sx ya Nah di sini kita bisa coba bungkus aja yang bagian ini ya ini saya coba Return terus saya bungkus ya bisa menggunakan fragmen seperti ini ya atau juga mau Deep juga boleh ya Sama aja gitu Terus misalkan di sini saya page yang tadi Nap bar ya jangan lupa untuk import dari komponen layout navbar Nah sekarang di detail produk ada ya kalau saya masuk ke produk ada juga nakbarnya terus saya masuk ke halaman paling luar ada juga ya karena dia di render di app.tsx ya Jadi ini adalah main filenya ya jadi semua akan mengakses dulu ke sini gitu nah kemudian Sekarang saya mau coba ya bikin sistem layoutting ya saya nggak mau nambah ini saya panggil di @.x nya gitu ya ini jadi berantakan banget nanti si ep.sx-nya saya tinggal bikin aja sebuah folder di dalam layout ini bebas namanya misalkan mau ya kalau saya biasanya kayak gini atau mau sel juga boleh gitu ya Nah ini saya ubah aja jadi cangkang dari aplikasinya gitu lah ya Nah kemudian [Musik] di sini saya bisa buat indeks dot tsx indeks X terus saya bikin aja kemudian di sini saya tinggal return yang tadi ya Div misalkan atau mau di sininya main juga boleh ya Sama aja terus di sini nak bar ya tadi kita butuh nafbar jangan lupa import ya nah ini kalau misalkan struktur foldernya ada di dalam sini ya kita bisa gunakan mundur kayak gini ya ini jauh lebih simple Nah ini Udah ya nabbar sekarang Saya mau masukkan di sini children inget-ingat lagi konsep dari children ya di sini bisa juga kita gunakan props aja misalkannya terus saya bikin con children sama dengan props Nah karena dia pakai type script error ya karena di sini tipenya katanya nggak di definisikan nah ini biasanya memang merepotkan tapi bikin codingan kita jadi mudah untuk dipahami gitu ya Nah ini tinggal kita gunakan aja misalkan di sini kita bikin ya type untuk Nah di sini nah kalau pakai dia langsung keluar suggestion nya ya kita bisa gunakan children dari Nah di sini tinggal kita Panggil app Shell props ya enaknya pakai kodium ai kayak gitu langsung otomatis muncul untuk suggestion-nya ya ini upsel tinggal kita export default Sorry huruf besar export default ya Nah tinggal kita panggil sekarang di app.tx ya kita nggak butuh navbar kita Ubah aja yang Deep ini jadi app Shell sekarang Nah kita Panggil dari komponen layout gitu ya ini akan jauh lebih rapi ya nah muncul kalau misalkan Saya mau menambahkan lagi di dalamnya aja berarti misalkan di sini ini saya bikin dif ya misalkan footer gitu ya nah ini ada puter ya terus saya coba buka lagi ke slash produk baju Nah ada puter Ya nah tapi kita hapus dulu aja nanti kita akan bikin belakangan ya untuk footernya Jadi kurang lebih seperti itu untuk sistem dari routing di dalam nexds ya kita udah belajar bagaimana terus kita udah belajar Dynamic routing terus kita udah belajar bagaimana untuk melakukan layouting ya di dalam project next GS kita Nah mungkin Cukup sekian untuk video kali ini jangan lupa untuk subscribe komen like dan share video ini kita ketemu lagi di video berikutnya