Halo semuanya Eh selamat datang kembali di channel saya Tajudin di video kali ini kita akan lanjutkan sesi tutorial next JS yang di mana Saya pernah membuat tutorialnya tapi sampai proses instalasinya aja dan tidak dilanjutkan sampai sekarang dan akhirnya saya akan melanjutkan tutorial nextjs kali ini dan menggunakan versi 14 terb ya Oke kamu boleh siapkan website nextjs lalu telwin JSS lalu react Icons Mungkin tiga dulu kali ya dan untuk aset seperti image keperluan website kita nantinya kamu boleh download di link ada di deskripsi kamu boleh download dan saya akan Jelaskan dulu ya Apa yang akan kita buat nantinya itu kita akan akan membuat website yang bernama baca web ya Di mana ini untuk ee website buku gitu ya Ini ada nabarnya ini kita bisa searching buku lalu di sini ada best sellernya kategori blog dan juga kontak lalu di sini ada Hero ininya sectionnya kemudian ada buku yang populer dan juga buku yang terbaru kemudian kita akan membuat namanya mungkin subscribe ya Jadi kalau misalnya kamu masukkan ee buku favorit kamu ingin di Ris di website ini kamu boleh kirimkan informasinya kemudian ini ada testimoni yang sudah pernah membaca di baca web lalu yang terakhir akhir ini ada namanya F ya untuk di sesi tutorial next pertama ini kita akan sliing landing page-nya terlebih dahulu dan kalau ada permintaan yang banyak nanti saya akan lanjutkan sampai ada menu login dan juga menu admin daspnya juga oke tanpa lama-lama lagi langsung aja e kita masuk ke proses instalnya baik kamu boleh Buka folder kamu lalu kamu boleh buat folder misalnya nextj ya oke di sini ada beberapa yang sudah saya buat itu untuk testing aja sebelum saya masuk ke tutorial ini kemudian kamu boleh ketikan di bagian S ini kamu ketik CMD lalu kamu kembali ke halaman website nextjs kita ke geted ya Nah kita pilih di menu installation Oke sebelum kamu instal ada baiknya kamu cek kembali note JS yang kamu pakai di sini direkomendasikan menggunakan versi 18.17 atau yang terbarunya gitu ya Coba kita cek dengan Oke n eh strip di sini Kita sudah menggunakan not CS versi 21 6.1 dan di mana sudah masuk ke rekomendasikannya kalau misalnya kamu belum apa namanya di bawah versi ini kamu boleh buka kembali website notde js-nya lalu kamu boleh download di bagian sini mau yang curan atau lts gitu ya kalau Saran saya mungkin di bagian sini aja kali ya Ukuran aja yang terbaru dengan fitur yang juga terbaru kamu boleh kamu boleh download yang Windows installer dan Langsung instal aja karena nanti otomatis terupdate versi Noe JS kamu Oke Baik kalau sudah diinstal node js-nya kamu boleh seperti biasa instal e eh ininya ya visual story code lalu kalau sudah instal visual story code kamu boleh Scroll ke bagian sini ya kita akan copyan kita paste ke bagian sini lalu kita enter baik di sini kita akan beri nama aplikasi kita atau nama folder logek kita itu apa di sini kita akan masukkan book web ya nah kemudian kita akan menggunakan typript atau tidak berhubung ini tutorial di awal gitu ya saya saran kan tidak menggunakan typ script aja tapi kalau misalnya kan kamu sudah mengerti kamu boleh menggunakan typ script tapi di sini kali ini saya akan tidak menggunakan kita pilih no lalu untuk slinnya kita pilih aja Yes Nah di sini kita langsung bisa menginstal otomatis Twin css-nya Karena berhubung kita menggunakan Twin CSS kita yeskan aja yang di mana Di video sebelumnya itu kita setelah menginstal next JS itu kita diwajibkan untuk menginstaln cssnya itu secara terpisah ya dan itu agak sedikit ribet juga gitu ya E untuk menambahkan ennya juga dan juga mentesnya juga tapi dengan next J versi terbaru ini kita sudah disediakan versiwin jsnya jadi tinggal Dian aja gu Ya enak bet sekarang oke berikutnya kita menggunakan kan eh folder directory atau tidak Nah kita akan menggunakannya biar rapi aja folder kitanya itu jadi tersusun rapi dan juga kita tidak bingung mau cari halaman mana gitu ya kita yeskan aja mau menggunakan app router kali ini karena kita di sesi pertama saya tidak akan menggunakan app router tetapi nanti kalau misalnya ada update eh saya akan menggunakan app routernya nanti ya tapi kali ini kita akan no saja lalu di sini saya pilih no saja ya Oke kita tunggu proses instalasinya selesai Oke baik ini proses instal next JC sudah berhasil ya kamu boleh close saja cmd-nya karena kita nanti akan menggunakan Terminal dari visual ST cod-nya kamu boleh saya Buka folder yang sudah kita buat tadi atau instal nextjs-nya di sini saya bernama bookwb gitu ya kalau kamu dengan nama lain kamu buka ya lalu di sini kita Klik Kanan kita pilih open with code ya Oke Baik Nah di sini Kita sudah berhasil menginstal next js-nya beserta Twin css-nya ya sebelum kita masuk ke codingan adaiknya saya akan menyarankan kamu untuk menginstall extension bernama is7 plus react redtiveip dan juga saya sarankan untuk menginstalss intell untuk eh biar gampang ketika kita manggil itu otomatis kita bisa pilih untuk background kalau sudah diinstal yes7 plus dan juga t css-nya kamu boleh kembali ke folder explorernya dan kita coba running kamu boleh ke Terminal di sini new Terminal baik sebelum kita running kita akan menginstal namanya Icons ya boleh buka di link linknya ada di deskripsi ya Re ionsgthub.io lalu kamu pilih NPM Nah di sini kita tinggal copyan aja bagian sini instalnya kembali ke visual ST code kalian lalu kita paskan di sini dan kita inst Oke proses instnya sudah kita cek kembali di package json-nya di sini Kita sudah berhasil menginstal next JS versi 14.1.0 kalau kamu berbeda dengan versi Ini kemungkinan ada perbedaan saat proses coding entah itu error saat mengor komponen dan lain sebagainya jadi misalkan disamakan atau tunggu versi update dari saya di video tutorial berikut kemudian di sini untuk re kita menggunakan versi 18 red juga 18 dan rea icon kita menggunakan versi 5.0.1 Oke kita close saja Lalu kita cek di bagian src-nya Nah di sini kita ada halaman page dan juga halaman style kita coba running dengan cara Run NPM Run baik di sini Kita sudah berhasil menjalankan kita akan buka url lokalnya kamu boleh ketik ee pencet ctrl plus klik kiri ya atau copykan url-nya juga boleh Oke kita langsung aja coba baik di sini kita berhasil menginstal nextjs-nya kemudian kita akan coba di untuk editingnya kamu boleh edit halaman ini di src page dan juga di index.js jadi kita boleh edit halaman ini di file index.js di dalam page-nya kita coba cek di src page index nah di bagian sini kita akan coding untuk ending page-nya ya tapi sebelum kita masuk proses codingnya saya akan coba dulu hapus dari Div sini sampai Div penutup akhir ya lalu di bagian sini saya akan hapus ini juga kita hapus saja semuanya kan juga kita hapus Oke kita simpan ya ini kosongnya kalau misal kita tes di bagian sini sudah berhasil kudian kamu boleh buka di bagian sty globalnya Nah di sini ya kita sudah berhasil meng juga jadi otomatis di Global C kita nya dulu lalu kita San Oke baik ya ini warnanya tadi gelap ini sudah terang kembali kemudian Ee Kita akan membuat di dalam src kita akan tambahkan new folder bernama componen nah di dalam componens ini kita perlu index.j nanti di dalam index.j ini kita akan import ee semua komponen di dalam ini ya Nah di dalam folder lagi di dalam folder komponen kita akan folder kembali misalnya kita tambahkan Mas bar lalu kita tambahkan menu Hero kitaoler ya untuk popular buku ya lalu buku terbaru kemudian kita butuh filter dan ini kita butuh subscriaction eh subscribe ya atau submit boleh oke di sini Kita sudah berhasil buat dan di masing-masing halaman komponen ini kita tambahkan index.js di masing-masing halamannya kita akan tambahkan dulu oke Sebelum saya akan tambahkan semuanya Eh karena kita sudah menginstal extension bernama is7 plus sekarang kita tinggal gampang ya untuk import semuanya jadi tinggal r f c tinggal Diab nah ini semua sudah terpanggil kita mulai subscribe Jangan lupa untuk untuk subscribe juga channel ini ya dan juga follow di Instagram saya di @mtjudind Dani jangan lupa Difollow dan di-share video ini Oke karena ini sudah kita simpan kita akan buat semuanya Oke kita sudah berhasil membuat index.js di masing-masing folder componen cek kembali ini sudah ya semua baik di bagian index componen ini ya ya kita akan mengimport folder componen misalnya Hero ya dari folder Hero kemudian masukkanb bar laluukkan popular dari jug Oh I kita punyaestimalian boleh tambahkanon bernama testimoni atau testimonial lalu testing ya simpan kita import juga lalu kita ort Hero nasba popular l subscribees baik kita di sini sudah berhasil mengor semua lalu kalian boleh close saja ini kita close lalu kemudian kita akan Panggil semua komponen yang berada ada dionen ka pertama ini adalah ya kalau saya akan manggil mab lalu saya akan manggil Hero lalu ini populer ya kemudian saya akan memanggil buanbu lalu subscribe ya testimonternya kita baik di sini Kita sudah ini lalu kemudian kita akan lihat di sini ya ini sudahpangil yang populer lates subscribe testimonial dan baik Kemudian Kemudian saya akan nambahkan Div di sini dan kamu boleh menambahkan head dan di head ini kamu boleh inputkan title ini ada Enor oke yang tadi di kita buat tadi kita taruh di paling bawah m diainnya itu saya akan rapikan ya nah jadi kita buat Div kemudian kita buat head dan m-nya tadi kita masukkan ke dalam ni yang tadi baru kita buat lalu di dalam head ini kita butuh yang namanya title lalu Meta description Meta viport icon lalu kita akan butuh namanya form Google ya kamu boleh cari di font google.com di sini saya akan menggunakan font bernama Qui ya di sini kamu boleh buka aja di sini kita akan pilih semua ya dan kemudian di bagian sini kamu boleh copyan ya di menu kanan ini kamuy Lalu kamu kembali ke bagian siniu Kikan di bagian bawah link ini kita rapikan terlebih dahulu oke nah ini berbeda dengan html ya Jadi kita harus menutup dengan garis Inya dan link link ini kita akanus tutnya dengan Nah di sini Kita sudah berhasil memasukkan link font Google kita simpan ada error Oke baik di head-nya ini kita perlu import karena dia tidak terbaca jadi kita harus import head ini dari next chest kita rapikan paling saja Oke sudah berhasil yaet sudah hilang baik kemudian kita akan tes dengan global CHS ini kita akan tes Apakah font-nya itu berhasil diinstal atau tidak dengan cara kita akan masuk ke bagian navb terlebih dahulu cek navb lalu kita tes aja ya A1 HW baik di sini sudah berhasil dan kita coba masuk ke Global kita langsung aja ini mungkin kita Lang Hapus dulu ya Oke nahu font Family atau kita bisa cek kembali di google-nya nah ini ya k kopi kanannya baik kita coba cek Oke ini sudah terpanggil ya nah gimana caranya biar ini global semuanya nanti teks yang kita input mau H1 H2 sampai P Itu font familynya itu caranya kita ganti ini dengan body jadi E apa ya teks yang berada di dalam body ituont coba simpan nah ini ya sudah berhasil kita input ya jadi font yang berada di dalam body itu familynya quick Oke kita berhasil menginstal dan juga kita berhasilinst Google dan IC kemudian kita akan tes jss-nya Apakah berhasil atau tidak dengan cara kita coba CL name kalau ditml itu kelas aja ya tapi kalau di react itu kita mengunakan Clas kita coba Bikin atau Oke ini sudah terpanggil tahuinnya berarti sudah terinstal dengan baik jadi enak nih nextjs yang sekarang di Man yang tutorial sebelumnya gitu ya jadi kita menginstal nextjs-nya aja lalu kita menginstal Twin cssnya itu secara terpisah kita harus in dulu di bagian Twin config ya ini ya itu dan kita juga harus Inut di Global cssnya tapi dengan versi yang terbaru itu kita engak usah repot-repot jadi kita langsung secara otomatiswin cssnya itu instal jadi kita tinggal pakai langsung baik selanjutnya kita akan membuat navb terlebih dahulu baik sebelum kita membuat navb kita lebih baik mengimport aset yang kita perlukan kamu boleh download asetnya di deskripsi di bawah kalau sudah didownload kamu boleh copy dan tes ke bagian publ ya boleh pasakan di bagian sini kemudian kita akan masuk ke public kita new file kita tambatan index.js di sini kita akan mengekord semuanya kita akan [Musik] import [Musik] [Tepuk tangan] [Musik] [Musik] [Musik] [Tepuk tangan] [Musik] [Musik] [Musik] [Musik] [Musik] [Musik] [Musik] [Musik] [Musik] [Musik] [Musik] [Musik] [Musik] [Musik] proses eh coding membuat landing Page di tutorial pertama kita dijs itu sudah sudah selesai itu ya dan sebenarnya saat prosesoding itu dari sampai ini itu seharusnya saya eh saya akan Jelaskan sebentar ini kita sudah berhasil membuat Ling P terlebih dahulu ini pop Bu baru ya lalution berikutnya insya saya akanembuat jugognya juga gu ya jug nanti akan ada file bukunya juga gitu ya dan juga apa ya list bukunya dan ini belum ada datnya masih belupampingan jadi nanti akan saya input juga e datanya itu baik yang pertama itu kita [Musik] membuatb jadi di enak B ba saya akanaskan dinya terlebih dahulu jadi di sini akan memanggil komponenja Kenapa karena biar rapi aja gitu ya Jadi kalau misal kamu semuanya ditaruh di sini kalau semuanyaaruh di sini n kita bisa mempersingkat kita dengan cara membuaton dan kita hanya memanggil komponens G ya lalu ketika kita and mencari atanti kodingan kita misalnya kita mau mencari bu Baruk susah jadi kita langsung mencari komponens di ini ya jadi jangan lupa di ya karena ini juga dan juga di head itu tadi juga kita sempat ada problem jadi jangan lupa diimport juga kemudian Diar juga Dior dan jug di di sour imnya juga di gitu ya lalu di sini kita input ya kita menggunakan form juga nanti untuknya juga kemudian di sini di luarar ini ini ada menu juga jadi kita mempunyai dua menu gu ya menu di atas itu hanya logo lalu search area dan juga beberapa menu seperti favorit ya dan juga ada nanti juga adaat ya dan juga ada misalnya in bahasa Inggris nanti juga kita akan buat dan juga k di bawnya itu ada bendung-bung tambahan seperti Home best seller kategori block Danon Nah di sini untuk Hero Kenapa saya taruh di bagiat W Eh ini kan Hero Ini masuknya itu e duaan masuknya itu di area nakbar gitu ya Kita juga bisa untuk membuat Pisa sebenarnya tapi karena saya Kebetulan juga ada di di dalam ber saya panggilon itu di ya kemudian heronya ini ya Jadi heroon ini dipanggil ke dalamon yang kita harus jugish di sini juga yang lain ya wau untukesnya atau googu terbaru saat proses codingnya itu itu sama codingnya dengan yang populer Jadi kalian tinggal copy paste aja dan populer ke Google terbaru ya dan tinggal ganti untuk m C lalu t bukunya kemudian ganti nama R itu saja yang diganti gu Ya Sisanya itu sama lalu yang berikutnya untuk ya ini juga sama denganbar kita punya juga sebenarnya Tapi di sini itu hanya untuk menginput data ke databas kita n jadi data yang diinput oleher disimpan ke database baik kemudian berikutnya di juga belumat di berikutnyaang best mungkin kita akan taruh diank Fi nantinya gitu ya tapi nantiat saja saya harus tes dulu oke mungkin segitu dulu untuk videoing kali ini mungkin segini dulu untuk video ini baru di baru sekarang gitu dilanjutkan bahkan cumaai instal doa dan Insyaallah saya akankan jadi kita sisaar bik tapi sayaa sudah saya buat saya akan buat samp sesai kalau Mohon maaf sekali lagi dan jangan lupa untuk subscribe share ke teman-teman kamu jika video ini bermanfaat kita belajar bareng-bareng ini kita terus upgrade dan ya jangan [Musik] lupaup saya di dansite tapi ini.com ya dan untuk snya Insyaallah saya akan di website saya di proses dan website itu akan saya buat sebagai portofolio saya lalu untuk bisnis juga dan juga terutama untuk projek-proek eh yang sudah saya buat dan juga tutorial yang sudah saya buat di YouTube akan saya di website Saya mungkin ya jadi saya apa namanya taruh download ada yang berbaya ada yang Oke kalau ada iniir nanti saya taruh dan sampai jumpa di video berikutnya