Halo semuanya, selamat datang kembali di channel saya Tejudin Di video kali ini kita akan melanjutkan sesi tutorial Next.js Yang dimana saya pernah membuat tutorialnya tapi sampai proses instalasinya saja Dan tidak dilanjutkan sampai sekarang Dan akhirnya saya akan melanjutkan tutorial Next.js kali ini dan menggunakan versi 4 14 yang terbaru ya Oke kamu boleh siapkan website next.js lalu tailwind.js 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 membuat website yang bernama bacaweb ini untuk website buku ini ada navbar nya ini kita bisa searching buku lalu disini ada bestsellernya, kategori, blog dan juga kontak lalu disini ada hero ini nya, section nya kemudian ada buku yang populer dan juga buku yang terbaru kemudian kita akan membuat namanya subscribe ya jadi kalau misalnya kamu memasukkan buku favorit kamu ingin di release di website ini kamu boleh kirimkan informasinya kemudian ini ada testimoni yang sudah pernah membaca di baca web lalu yang terakhir ini ada namanya footer untuk di sesi tutorial next.js pertama ini kita akan slicing landing page terlebih dahulu dan kalau ada permintaan yang banyak nanti saya akan lanjutkan sampai anda menunggu login dan juga menunggu admin dashboardnya juga oke tanpa lama-lama lagi langsung aja kita masuk ke proses installnya baik kamu boleh buka folder kamu lalu kamu boleh buat folder misalnya next.js 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 sesper ini kamu ketik cmd lalu kamu kembali ke halaman website next.js kita ke get started ya kita pilih di menu installation sebelum kamu install ada baiknya kamu cek kembali node.js yang kamu pakai disini direkomendasikan menggunakan versi 18.17 atau yang terbarunya coba kita cek dengan node.stripv disini kita sudah menggunakan node.js versi 21 dan emangnya sudah masuk ke rekomendasi ikannya kalau misalnya kamu belum apa namanya dibawah versi ini kamu boleh kembali website.js nya lalu kamu boleh download di bagian sini mau yang current atau LTS gitu ya kalau saran saya mungkin di bagian sini aja kali ya kurangnya yang terbaru dengan fitur yang juga terbaru kamu boleh download yang Windows installer dan langsung install aja karena nanti otomatis terupdate versi node.js kamu oke baik kalau sudah di install node.js nya kamu boleh seperti biasa install visual studio code lalu kalau sudah install visual studio code kamu boleh scroll ke bagian sini ya kita akan copy kan kita paste ke bagian sini lalu kita enter baik disini kita akan beri nama aplikasi kita atau nama folder logic kita itu apa disini kita akan masukkan web ya kemudian kita akan menggunakan typescript atau tidak berhubung ini tutorial di awal gitu ya saya sarankan tidak menggunakan typescript aja tapi kalau misalkan kamu sudah mengerti kamu boleh menggunakan TypeScript tapi disini kali ini saya akan tidak menggunakan TypeScript kita pilih no lalu untuk S-Line nya kita pilih aja yes nah disini kita langsung bisa menginstal otomatis Tailwind CSS nya karena berhubung kita menggunakan Tailwind CSS kita yes kan aja yang dimana di video sebelumnya itu kita setelah menginstal Next.js itu kita diwajibkan untuk menginstal Tailwind CSS nya itu secara terpisah ya dan itu agak sedikit ribet juga gitu ya untuk menambahkan Tailwind nya juga dan juga meletaskan juga dari tapi dengan Next.js versi terbaru ini kita sudah disediakan versi Tailwind CSS nya jadi tinggal di gunakan aja enak banget pokoknya sekarang oke berikutnya kita menggunakan folder directory directory atau tidak Nah kita akan menggunakannya biar rapi aja folder kitanya itu jadi tersusun rapi dan juga kita tidak bingung mau cari alaman mana gitu ya kita yeskan aja mau menggunakan approuter kali ini karena kita di sesi pertama saya tidak akan menggunakan approuter tetapi nanti kalau misalnya ada update saya akan menggunakan approuternya nanti tapi kali ini kita akan no sehat lalu disini saya pilih no saja ya oke kita tunggu proses instalasinya selesai baik-baik ini proses install next.js sudah berhasil ya kamu boleh close saja cmd nya karena kita nanti akan menggunakan terminal dari visual studio code nya kamu boleh buka folder yang sudah kita buat tadi atau install next.js nya disini saya bernama bookweb kalau kamu dengan nama lain kamu buka lalu disini kita klik kanan kita pilih open with code oke baik disini kita sudah berhasil menginstall next.js nya beserta tauin CSS nya sebelum kita masuk ke kodingan, ada backlink saya akan menyarankan kamu untuk menginstal extension bernama ES7 Plus React Redux React Native Snippet dan juga saya sarankan untuk menginstal Tailwind CSS IntelliSense untuk biar gampang aja ketika kita manggil itu sudah otomatis kita bisa pilih untuk background warna buat kalau sudah di install yes 7 plus dan juga Tailwind CSS nya kamu boleh kembali ke folder explorernya dan kita coba running kamu boleh ke terminal disini new terminal sebelum kita running kita akan menginstal namanya react icons ya kamu boleh buka buka di linknya ada di deskripsi ya reacticons.github.io lalu kamu pilih npm nah disini kita tinggal copykan aja bagian sini installnya kembali ke visual studio code kalian lalu kita paste kan disini dan kita install oke proses installnya sudah berhasil kita cek kembali di package.json nya disini kita sudah berhasil menginstal next.js versi kalau kamu berbeda dengan versi ini kemungkinan ada perbedaan saat proses coding entah itu error saat mengimport komponen dan lain sebagainya jadi bisa akan disamakan atau tunggu versi update dari saya di video tutorial berikutnya kemudian disini untuk react kita menggunakan versi 18 react-dom juga 18 dan react-icon kita menggunakan versi oke kita close saja lalu kita cek di bagian src nya nah disini kita ada halaman page dan juga halaman style kita coba running dengan cara run npm run dev baik disini kita sudah berhasil menjalankan kita akan buka url lokalnya kamu boleh ketik pencet set rl plus klik kiri ya atau copykan urlnya juga boleh oke kita langsung aja coba baik disini kita berhasil menginstal next.js nya kemudian kita akan coba di untuk editingnya kamu boleh edit halaman ini di src, patch dan juga di index.js jadi kita boleh edit halaman ini di file index.js di dalam patchnya kita coba cek di src, patch, index nah di bagian sini kita akan coding untuk landing patchnya tapi sebelum kita kita masuk proses codingnya saya akan coba dulu hapus dari div sini sampai div penutup akhirnya lalu di bagian sini saya akan hapus ini juga kita hapus saja semuanya const nya juga kita hapus oke kita simpan ya ini kosong ya kalau misalnya kita test di bagian sini, start to work, oh oke ya sudah berhasil kemudian kamu boleh buka di bagian style globalnya nah di bagian sini, ini ya kita sudah berhasil mengikuti juga jadi sudah otomatis selalu import di global CSS kita disini kita akan hapus semuanya dulu lalu kita cancengkan, oke baiknya ini warnanya tadi gelap ini sudah terang kembali kemudian kita akan membuat di dalam src kita akan tambahkan mimp folder bernama components nah di dalam components ini kita perlu index.js nanti di dalam index.js ini kita akan mengimport semua komponen di dalam ini ya nah di dalam folder lagi di dalam folder komponen kita hasilnya folder kembali misalnya kita tambahkan lastbar lalu kita tambahkan hero kita cilco laptop cooler ya untuk popular bukunya lalu buku baru kemudian kita butuh filter dan ini kita butuh subscribe ya atau submit boleh oke disini kita sudah berhasil membuat dan di masing-masing halaman komponen ini kita tambahkan index.js di masing-masing halaman ya kita akan tambahkan dulu sebelum saya akan tampilkan semuanya karena kita sudah menginstal extension bernama ES7 Plus sekarang kita tinggal gampang untuk import semuanya, jadi tinggal rafce tinggal di tab nah ini semua sudah terbangkit kita tambah lagi subscribe jangan lupa untuk subscribe juga channel ini ya dan juga follow di instagram saya di mtajudinwd jangan lupa di follow 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 components kita cek kembali ini sudah ya semuanya baik di bagian index components ini ya bobscrap ya kita akan menginform folder components misalnya hero itu ya dari folder hero biar kita masukkan path bareng 14 of Bar, lalala... kita sudah masukkan popularas dari popular largest diatus 1913 or L6, that's ya L6, down to bell oh iya, kita punya testimoni oke, let's do it ya kalian boleh tambahkan komponen bernama testimoni atau testimonials kita akan melakukan ini di sini kita akan menggunakan testimonial kita akan menggunakan testimonials kita akan mengekspor hero nasib populasi Latest subscribed foodperl, walau latest demonnya. Baik, kita disini sudah berhasil mengimport semua.
Lalu kalian boleh close aja. Ini juga kita close. Lalu kemudian kita akan panggil semua komponen yang berada di componentsnya. Pertama. ini adalah suara yang saya akan manggil wasbar, lalu saya akan manggil hero lalu yang populer ya kemudian saya akan manggil buku terbaru lalu subscribe ya dan tinggal testimonial oh ya footernya kita bye disini kita sudah ini lalu kemudian kita akan lihat nah disini ya ini sudah terpanggil semua komponen yang kita masukkan ada nakbar hero popular latest subscribe testimonial dan youtube baik kemudian kemudian saya akan menambahkan div disini dan kamu boleh menambahkan head dan di head ini kamu boleh inputkan title apa punya nr oke yang tadi div kita buat tadi kita taruh di paling bawah hai hai di mainnya itu saya akan rapikan ya nah jadi kita buat div kemudian kita buat head dan mainnya tadi kita masukkan ke dalam div yang tadi baru kita buat lalu di dalam head ini kita butuh yang namanya title lalu meta description meta viewport, icon lalu kita akan butuh namanya font google ya kamu boleh cari di font google.com disini saya akan menggunakan font bernama quicksand disini kamu boleh buka aja disini kita akan pilih semua id nya ya kemudian di bagian sini kamu boleh copy kan ya di menu kanan ini kamu copy lalu kamu kembali ke bagian sini kamu copy kan di bagian bawah link ini kita rapikan terlebih dahulu oke nah ini berbeda dengan HTML jadi kita harus menutup darurat garis linknya dan di link ini kita akan push tutup linknya dengan tutup int nah disini kita sudah berhasil memasukkan link from google kita simpan, gak ada error Oke baik di headnya ini kita perlu import karena dia tidak terbaca Jadi kita harus import head ini dari next.js Wah kita rapikan lebih paling tersebut saja ya Sudah berhasil ya, ethernet sudah hilang Baik kemudian kita akan tes dengan global CSS ini Kita akan tes apakah fontnya itu berhasil di install atau tidak dengan cara kita akan masuk ke bagian navbar terlebih dahulu cek navbar lalu kita tes aja ya A1 handling work baik disini sudah berhasil dan kita coba masuk ke global kita langsung ada ini mungkin kita langsung upload dulu ya oke nah R1 font family atau kita bisa cek kembali di Googlenya nah ini ya kita copy kanannya baik kita coba cek oke ini sudah teranggil ya nah gimana caranya biar ini global semuanya dalam arti teks yang kita input mau H1, H2 sampai P itu font family nya with send itu caranya kita ganti ini dengan body jadi teks yang berada di dalam body itu adalah font family kita coba simpan, nah ini ya sudah berhasil kita input, jadi font yang berada di dalam body itu font familynya quicksand oke kita berhasil menginstal dan juga kita berhasil menginstal font google dan icons kemudian kita akan tes tailwind.css nya, bakal berhasil atau tidak dengan cara kita coba class name, waduh dia tml itu kelas aja ya tapi kalau di ria2 kita menggunakan kelas dan kita coba begit atau ini sudah terpanggil tahunya berarti sudah terinstall ruangan baik jadi enak nih next.js yang sekarang dimana ya tutorial sebelumnya gitu ya jadi kita menginstal next.js nya aja lalu kita menginstal Darwin CSS nya itu secara terpisah kita harus input dulu di bagian Darwin config ya ini ya gitu dan kita juga harus input di global CSS nya tapi dengan versi yang terbaru itu kita gak usah repot-repot jadi kita langsung secara otomatis Darwin CSS nya itu terinstall jadi kita tinggal pakai langsung ya udah, bol baik selanjutnya kita akan membuat navbar baik sebelum kita membuat navbar kita lebih baik mengimport aset yang kita perlukan kamu boleh download asetnya di deskripsi di bawah kalau sudah di download kamu boleh copy dan paste ke bagian publiknya kamu boleh pastikan di bagian sini kemudian kita akan masuk ke public kita nge-file kita tempatkan index.js disini kita akan memilih course formanya kita akan import musik musik musik musik musik musik musik Terima kasih telah menonton musik musik musik Terima kasih.
Intro Well, proses coding membuat landing page di tutorial pertama kita di next.js itu sudah selesai dan sebenarnya saat proses coding itu dari mathbat sampai footer ini itu seharusnya ada suaranya, tetapi tidak ada suaranya yang kita tahu errornya bagaimana jadi saya akan jelasin sedikit poin yang pentingnya aja Pekomisial ini masih ada perbuatan yang saya... question itu tidak ada, kamu boleh dikasih ikon komentar, saya akan jawab jadi saya akan jelaskan sekepar ini kita sudah berhasil membuat landing page dan terlebih dahulu, ini ada popular now, buku terbaru, lalu subscription, dan testing only dan juga food untuk update berikut ini, saya akan buat Lister juga, volume-nya, situan login-nya juga gitu ya. Volume-nya nanti akan ada file bukunya juga gitu ya, dan juga list bukunya.
Dan ini belum ada datanya gitu ya, masih belum file-nya. Saya mau tampilkan aja. Jadi nanti akan saya input juga datanya gitu.
Baik, dan yang pertama itu kita... kita membuat last bar, jadi di last bar itu, mas Jules mau beli enak banget dulu, saya akan tinggal scan di next.js lebih dahulu, jadi di sini akan memanggil komponennya aja, kenapa? karena biar api aja, jadi kalau misalnya kamu semua ini ditaruh di sini, kalau dalamnya semua aja ditaruh di sini, kita bisa mempersihkan coding kita dengan cara membuat komponen dan kita memanggil komponen saja lalu ketika kita mencari apapun berarti coding kita misalnya kita mau mencari buku terbaru misalnya kita ada yang ambil periksa, tidak usah jadi kita langsung mencari komponen saja kemudian di move bar ini, ini lebih di image, jadi jangan lupa di import ya, karena ini penting juga dan juga di head itu tadi juga kita sempat ada problem, jadi jangan lupa di import juga kemudian di navbar juga di import, dan juga di source image nya juga di import gitu ya lalu disini kita input ya, kita menggunakan form juga nanti untuk live search nya juga Kemudian disini di luar naflar ini, ini ada menu juga jadi kita mempunyai dua menu Menu di atas itu hanya logo, search area dan juga beberapa menu seperti Favorites dan juga ada nanti juga ada Backboard ya Dan juga ada misalnya bahasa Inggris nanti juga kita akan buat dan juga 4 komikon. Oleh di bawahnya itu ada menu menu pembahan seperti home, best seller, kategori berdasarkan komikon Nah disini untuk hero kenapa saya taruh di bagian atas, terbang, ini kan hero ini masuknya itu kalau kebetulan masuknya itu di area nakbat gitu ya, kita juga bisa untuk membuat, bisa sebenarnya tapi karena saya kebetulan juga ada di dalam, berarti saya panggil komponen hero itu di dalam markup kemudian hero nya ini, jadi hero komponen ini dipanggil ke dalam komponen markup wowel yang mereka itu untuk beri di operasi world Salah, kita harus juga import 2 ingles dan resource inglesnya Kemudian disini juga ada yang lainnya Lalu untuk testnya atau buku terbaru Saat proses codingnya itu, itu sama codingnya dengan yang poplar Jadi kalian tinggal copy paste aja dan pukulnya ke buku terbaru dan tinggal ganti untuk image cover lalu judul bukunya kemudian nama Rose itu saja yang diganti sisanya itu sama lalu yang berikutnya untuk berbukit subscribe ini juga sama kita punya Tapi disini Itu hanya on professional deal data ke database kita nantinya jadi data yang diinput oleh user itu akan disimpan ke database baik, kemudian rekrutnya itu ada di sdmd dan di sdmd juga belum ada data nanti kita juga akan membuat di update rekrutnya nanti ini bawa-bawa ini panjang dan nanti kita juga ada full-time user ya full-time ini ada navigation, company, dan agent untuk database mungkin kita akan taruh di API nantinya gitu ya tapi nanti dats aja gimana gimana saya harus tes dulu oke mungkin segitu dulu untuk video kali ini mungkin segitu dulu untuk video tutorial di setelah ini mohon maaf kalau kurang sesuai baru di eh kayaknya kumus ini baru sekarang gitu untuk dihentikan, kita sudah menggunakan gading image, bahkan cuma saya install doang sebelum kita mengedit dan insya Allah saya akan rebutkan terus kita akan berhasil kita klik to write notice kemudian let's just hit setelah itu misalnya ada yang request bisa ketikkan di kolom komentar insya Allah saya akan bikin ini seluruh webOS 2.0 tapi saya sedikit membutuhkan total sudah saya buat, saya akan ya udah buat sampai selesai oke kalau misalnya ada kata-kata yang ribet gitu ya mohon maaf setelah ini dan jangan lupa untuk subscribe agar tetap teman-teman kamu jika video ini bermanfaat dan kita belajar bareng-bareng ya ini kita terus upgrade dan ya jangan lupa komen kita dan jangan lupa follow dan subscribe kita jadi PoldoD dan di video ini website saya juga ada di jadidin tapi ini satu.com ya dan untuk sosial stutner insya Allah saya akan upload di website saya di si proses aku jual website dia dan website itu archange saya buat sebagai portfolio saya lalu untuk bisnis juga dan juga terutama untuk project project hai hai yang sudah saya buat dan juga tutorial yang sudah saya buat di youtube akan saya upload di website saya mungkin ya jadi saya akan apa namanya taruh link download subscribe ada yang berbayar ada yang gratis oke kalau ada ini takdir nanti saya taruh ini oke terima kasih dan sampai jumpa di video berikutnya