Bismillahirrahmanirrahim, bagaimana kabarnya teman-teman di video kita kali ini saya akan menyampaikan bagaimana saya merubah website saya dari yang sebelumnya menggunakan PHP akan saya ubah dengan menggunakan yang namanya Next.js dan saya akan sampaikan juga mengapa saya merubah website saya dari yang sebelumnya PHP saya ubah dengan menggunakan yang namanya Next.js Nah untuk alamat saya, untuk websitenya adalah dirumahrafif.id dimana disini berisikan beberapa course yang saya miliki baik yang premium course maupun yang free course ya atau yang gratis Untuk yang premium cost sementara ini hanya ada dua saja Untuk yang cost laravel kemudian cost yang bootstrap ya Dua-duanya saya letakkan di Udemy Dan kalau misalnya saya klik di bagian tombol ikuti ini Dia akan membawa ke halaman dari Udemy Beserta kupon yang saya sudah masukkan kepada scriptnya Sehingga ketika dibuka dia langsung mendapatkan potongan Kalau misalnya kuponnya masih berlaku ya Ini yang premium cost Kemudian untuk yang free cost Ini langsung kalau misalnya diakses Dia akan menuju ke halaman YouTube saya ya sehingga langsung bisa dibuka. Nah untuk website saya ini dia menggunakan PHP tanpa menggunakan halaman admin sama sekali juga tanpa menggunakan yang namanya database. Sehingga untuk data-datanya langsung saya masukkan ke bagian skripnya. Nah bagaimana cara saya merubah skrip sehingga ketika ada perubahan data untuk isiannya terutama tadi di bagian kupon bisa saya lakukan untuk update-nya. Nah saya masukkan di bagian GitHub saya teman-teman Jadi proyeknya website di rumah Raviv ini adalah untuk skrip yang saya masukkan ke halaman website yang saya miliki Sehingga kalau misalnya ada perubahan dari kuponnya saya langsung masukkan ke bagian skripnya Di sini saya langsung masukkan ke bagian skripnya ini Sehingga bisa ketika diakses dia langsung akan menuju ke bagian Udemy Langsung juga dia akan menambahkan kupon di sana Ketika saya melakukan edit, kemudian saya lakukan commit, maka dia akan langsung melakukan perubahan ke website yang saya miliki.
Nah bagaimana cara bisa dia melakukan update? Karena saya menggunakan layanan yang dimiliki di bagian cpanel yang namanya Git Version Control. Nah dari Git Version Control ini saya sambungkan ke GitHub saya, sehingga ketika saya sudah melakukan proses update di bagian script saya yang saya letakkan di bagian GitHub ini. Saya tinggal memasukkan di bagian update from remote ini, sehingga perubahan yang saya lakukan di bagian GitHub, dia akan ditarik di bagian cPanel, kemudian langsung akan tampil jadi di bagian website saya. Jadi setidaknya ada tiga buah alasan mengapa saya ingin merubah dari yang sebelumnya PHP, ingin saya ubah menjadi Next.js.
Alasan yang pertama adalah supaya kita bisa lebih meringkas prosesnya. Karena tadi ketika saya melakukan proses update, update dengan menggunakan PHP saya perlu melakukan edit terlebih dahulu di GitHub yang saya punya saya edit kemudian saya commit kemudian ketika sudah saya commit baru saya menuju ke halaman cpanel dari penyedia hosting saya di bagian halaman cpanel saya cari di sana untuk halaman yang terkait dengan git version control saya akses kemudian saya klik di bagian update from remote ya ada beberapa langkah yang harus saya lakukan Kalau misalnya saya akan ubah dengan menggunakan Next.js, maka perubahan yang saya lakukan cukup saya lakukan di bagian lokal saya. Saya edit di sana, kemudian saya commit, kemudian saya kirim ke bagian remote.
Nah dari bagian remote tadi, nanti dia akan bisa langsung kita arahkan supaya kita bisa menyimpan perubahan yang ada di bagian kitab tadi, sekalian di deploy di bagian Vercel teman-teman. Nanti kita akan menggunakan yang namanya Vercel. Sehingga alasan yang pertama adalah supaya lebih meringkas proses.
Alasan yang kedua adalah supaya lebih menghemat biaya. Karena tadi untuk layanan hosting saya, saya sewa satu tahun di mana kontennya sebenarnya tidak begitu banyak. Hanya untuk meletakkan halaman depan saja dari website saya berisikan kursus-kursus yang saya miliki.
Sehingga kalau misalnya saya bisa deploy untuk proyek yang saya miliki ini ke bagian Vercel, harapannya saya tidak perlu membayar tahunan. Cukup saya membayar untuk domennya saja. Kemudian alasan yang ketiga adalah Sekalian saja kita belajar yang namanya Next.js Oke selanjutnya mari kita coba lihat langkah yang saya lakukan ya Untuk mulai belajar sekaligus nanti kita akan deploy dari aplikasi website saya Dengan menggunakan Next.js Yang pertama karena disini kita akan menggunakan Next.js Maka pertama kali yang perlu kita siapkan adalah Node.js teman-teman Dia adalah semacam runtime untuk menjalankan dari javascript di laptop ataupun di komputer kita ya Silahkan bisa di download kemudian di install Kemudian kalau misalnya sudah di install silahkan buat terlebih dahulu untuk projectnya ya Tempat teman-teman akan meletakkan project dari Next.js nya Kemudian jalankan perintahnya untuk melakukan proses instalasi dari Next.js npx create next app latest Ini sudah ada di bagian dokumentasinya ya Nah nantinya kalau misalnya prosesnya sudah selesai Nanti dia akan membentuk untuk projectnya di bagian script kita Dan ini sudah saya buka di bagian VS Code yang saya miliki Nah disini karena saya menggunakan yang namanya font awesome di bagian project saya ini, dari yang sebelumnya juga menggunakan font awesome. Ketika kita menggunakan font awesome, maka kalau misalnya saya tidak menggunakan next.js, tinggal saya masukkan saja di bagian headnya. Di bagian head dari project saya, saya masukkan untuk link dari font awesome, maka langsung bisa kita gunakan.
Tetapi karena disini kita menggunakan yang namanya font awesome dan akan saya gunakan di bagian next.js saya. Maka kita perlu melakukan proses instalasi dari font awesome tadi ya. Jalankan perintahnya npm isave font awesome.
Bukan font awesome ternyata di sini ya. Font awesome kemudian font awesome svg core ya. Di bagian dokumentasinya sudah disiapkan. Nah nanti kalau sudah dimasukkan tinggal kita jalankan ya.
Saya misalnya akan jalankan untuk prosesnya npm run dev begini. Maka dia akan langsung menjalankan. Dari local server tempat kita mengerjakan proyek Next.js kita ini Dan yang perlu diingat karena kita akan menggunakan dari Oops sorry Ya karena disini kita akan menggunakannya sebagai sebuah proyek Yang akan kita gunakan di bagian Next.js Maka konsep yang pertama harus kita sadari adalah Kalau kita menggunakan React ataupun kita menggunakan Next.js Ataupun menggunakan library yang lain Maka kita bentuk dia menjadi komponen-komponen Nah ada beberapa komponen yang saya siapkan Ada about me food Tutor, free course, header, hero, js, premium course, kemudian statistik di sini. Saya sudah masukkan ke bagian dalam dari folder komponen. Nah, nanti saya panggil setiap komponennya tersebut di bagian halaman page js.
Coba saya close dulu. Di bagian page js ini, saya panggil. Ini adalah komponen-komponen yang sudah saya siapkan. Ada header, hero, statistik, premium course, free course. Kalau misalnya ini saya jalankan, dia sudah jalan.
Kemudian kalau misalnya saya buka di bagian browser saya, dia akan tampil seperti ini. Ini urutannya di bagian paling bawah Kalau misalnya saya naikkan untuk tentang saya ini Di bagian bawahnya footer misalnya Saya masuk ke bagian page Ini saya coba close dulu Kemudian saya masuk ke bagian about me Saya letakkan di bagian bawah footer Seperti ini Saya ctrl S Kemudian kalau misalnya kita lihat Sekarang kalau kita coba refresh ya Nanti harusnya dia akan berada di bagian bawah dari footernya Karena dia kita bentuk menjadi komponen-komponen menjadi seperti ini nanti footernya kemudian tentang saya di bagian bawahnya kalau kita bekerja dengan yang namanya komponen saya coba kembalikan lagi seperti ini, coba kita lihat hasilnya lagi, maka harusnya dia akan kembali lagi ke bagian atas dari footer yang sudah kita siapkan jadi kalau kita menggunakan yang namanya Next.js ataupun React.js ataupun library yang lain terkait dengan javascript maka kita harus berpikir bahwa dia kita perlu ubah... Menjadi komponen-komponen Tidak menjadi satu halaman penuh langsung kita templokkan begitu ya Kita masukkan scriptnya di sana Tetapi baiknya kita bentuk dia menjadi komponen-komponen Selanjutnya tentang Next.js Kita berbicara terlebih dahulu tentang yang namanya routing teman-teman Nah saya akan bandingkan dengan routing yang saya miliki di proyek saya Yang sebelumnya dengan menggunakan PHP ya Untuk website di rumah rafif.id Setidaknya ada dua buah routing Routing yang pertama adalah course, kemudian routing yang kedua adalah discord, sehingga kalau misalnya saya punya alamat di rumah rafif.id slash course begitu, dia akan menuju ke halaman course saya, kemudian saya masukkan misalnya di rumah rafif.id slash discord dia akan menuju ke discord saya nah di bagian dalam dari course ini sebenarnya dia akan kita pecah menjadi dua bagian ya di bagian index ini, ya dia pecah menjadi dua bagian, kalau misalnya slash course slash laravel dia menuju ke course premium saya untuk Laravel Kalau slash course slash bootstrap, dia menuju ke course saya di Udemy dengan menggunakan yang namanya bootstrap.
Kalau misalnya tidak ada di bagian belakangnya, jadi semisal di rumah rafif.id slash course saja, maka dia akan menuju ke bagian halaman saya yang ada di Udemy. Sehingga akan menampilkan semua course yang saya miliki. Ini kalau misalnya kita menggunakan PHP.
Tetapi kalau kita menggunakan yang namanya Next.js, maka routing yang ada di Next.js dia berbasis file, teman-teman. Nah, apa yang dimaksud dengan berbasis file? Coba kita lihat. Kalau kita bekerja dengan routing yang ada di bagian Next.js, maka dia akan masuk seperti halnya ketika kita membuat folder terlebih dahulu.
Jadi misalnya di sini ada routing course misalnya. Di bagian routing course, maka... Defaultnya ketika kita melakukan akses ke bagian course, misalnya dirumah rafif.id slash course, kalau kita menggunakan yang namanya Next.js, maka default pertama yang diakses adalah PGS ini. Di sini saya masukkan alamat dari Udemy saya, alamat halaman depan dari Udemy yang saya miliki. Sehingga akses ke user programming di rumah Rafif.
Ini adalah defaultnya. Tetapi di sana kalau kita lihat saya punya dua buah routing lagi ya di bagian dalam dari course. Ada yang mengarah ke bagian Laravel, ada juga yang mengarah ke bagian Bootstrap. Nah ini kita masukkan di bagian Dynamic Routing.
Kalau kita menggunakan Next.js maka saya memasukkan terlebih dahulu course-nya tadi. Kemudian saya masukkan di bagian dalamnya satu buah folder di mana foldernya saya berikan dengan tanda kurung siku begitu. Kemudian saya masukkan ID seperti ini.
Kalau misalnya saya klik, di sana dia memasukkan lagi untuk default halaman yang diakses pertama kali, yang ini adalah PGS. Kalau coba saya buka di bagian PGS, maka ini kita bisa namakan untuk fungsinya apapun. Yang jelas di bagian bawah perlu kita siapkan untuk defaultnya, export default function blog post misalnya.
Jadi default yang diakses di bagian file PGS tersebut adalah fungsi blog post. Nah untuk melakukan routingnya, saya siapkan 2 buah routing, Laravel, kemudian Bootstrap Tiap-tiapnya kalau misalnya dia diakses, dia akan menuju ke bagian halaman dari Udemy Di bagian Laravel dia menuju ke bagian Udemy, kemudian di bagian Bootstrap dia juga mengarah ke bagian Udemy Bedanya di sini, saya siapkan kuponnya di bagian atas Sehingga kalau misalnya sekarang adalah Januari 2025, untuk tanggal 1 misalnya Kemudian nanti di pertengahan bulan saya akan update update untuk kuponnya tinggal saya ubah di bagian kupon ini misalnya tanggal 2 ataupun tanggal 3 ataupun tanggal 4 begitu maka di bagian bawah sudah langsung akan mengambil kupon terakhir yang saya miliki karena disini saya panggil lagi untuk kuponnya ya begitulah kurang lebih untuk proses di bagian routing ya jadi default yang diakses pertama kali adalah yang namanya pcs ketika kita membuat sebuah folder pastikan di bagian dalamnya ada yang namanya pcs ya untuk Sehingga sekarang kalau misalnya kita akses di bagian localhost spotnya adalah 3000, ini adalah tampilan yang kita dapatkan dari proyek Next.js kita. Dan kalau misalnya ini saya coba kecilkan, maka di sini bisa kita tambahkan untuk hamburger menu di mana dia akan menampilkan untuk menunya. Kalau misalnya kita klik, kemudian kalau misalnya kita klik lagi, dia akan disembunyikan untuk menunya lagi. Dan ini kita tidak perlu menambahkan javascript tambahan ya, karena di sini kita sudah menggunakan yang namanya Next.js, tinggal kita atur untuk statenya.
state kapan dia akan tampil, kemudian state kapan dia akan disembunyikan untuk menunya tersebut kemudian selanjutnya setelah kita siapkan untuk projeknya di lokal kita maka selanjutnya kita akan melakukan proses upload dari projek yang kita miliki tadi ke bagian GitHub ya nah ini adalah GitHub yang saya siapkan, alamatnya adalah website dirumah rafif.next.js nah ini adalah projek dalam bentuk private ya tentu saja teman-teman tentu saja tidak bisa akses ya untuk projeknya tersebut Nah saya siapkan untuk projeknya sehingga kalau misalnya saya melakukan proses pengembangannya di bagian lokal Kemudian saya tambahkan, kemudian saya commit, kemudian saya push tadi untuk projeknya Dia akan langsung masuk ke bagian dalam dari projek saya ini, website dirumahrafif.next.js Nah selanjutnya kita akan menghubungkan antara projek yang saya miliki di bagian GitHub ini Kita akan sambungkan ke bagian Vercel teman-teman Nah untuk penyambungannya teman-teman bisa akses di alamat vercel.com Kemudian silakan bisa login menggunakan akun git yang teman-teman miliki Kemudian di sana ditambahkan saja untuk proyek yang akan teman-teman masukkan ke bagian Vercel Nah ini kita bisa masukkan untuk yang proyeknya berbentuk Next.js ataupun React.js Di sini saya coba-coba untuk menggunakan React.js kemudian proyek dengan menggunakan yang namanya Next.js Tambahkan saja proyek kemudian dipilih untuk proyeknya Kalau misalnya dia belum tampil di sini di bagian bawahnya Pilih saja di bagian bawah ada Adjust GitHub App Permission. Nantinya kalau proses untuk melakukan deploy ini sudah sukses, nantinya proyek kita akan mempunyai alamat sendiri. Untuk alamat website saya dengan menggunakan Vercel, maka saya bisa akses dengan alamat di website di rumah Rafif Next.js Vercel app ini.
Ini adalah alamat proyek saya ketika diakses dengan menggunakan domain yang dimiliki oleh Vercel. Tapi itu saja kita tidak ingin ketika kita... Kita membagikan untuk alamat kita.
Kita menambahkan di bagian bawahnya ada versel.app seperti ini ya. Kita ingin supaya yang tampil adalah alamat kita sendiri. Kalau dalam kasus saya maka alamatnya adalah dirumahrafif.id ini.
Nah bagaimana cara kita bisa mengganti dari yang sebelumnya alamatnya adalah website dirumahrafif.next.js versel.app ini. Supaya dia berganti menjadi dirumahrafif.id. Maka kita bisa melakukan pengaturan di bagian versel kita ya. Saya masuk dulu ke bagian Vercel yang saya miliki untuk projeknya tadi. Kemudian di sana ada di bagian atas ada settings teman-teman ya.
Klik saja di bagian settings. Kemudian pilih di bagian sebelah kiri ada domain. Nah di sana silakan masukkan saja domain yang akan teman-teman pilih.
Supaya kita bisa menggantikan alamat yang sebelumnya kita dapatkan dari Vercel. Supaya dia berganti dengan alamat yang kita inginkan. Alamat yang saya inginkan di sini adalah dirumahrafif.id. Tinggal dimasukkan saja untuk alamatnya.
Kemudian nanti dia akan memberikan di sana untuk informasi tentang name server yang nanti kita akan tambahkan. Kalau teman-teman sudah mendapatkan untuk name servernya, maka silakan di copy. Kemudian dimasukkan ke bagian dalam dari penyedia layanan domain yang teman-teman miliki. Misalnya di sini layanan domain saya yang saya gunakan adalah rumah web. Masuk ke bagian domain.
Masuk dulu ke bagian produk kemudian pilih di bagian domain Pilih domain yang teman-teman miliki Contohnya disini domain saya adalah dirumahrafif.id Saya klik di bagian manage Kemudian pilih di bagian name server setting Nah disini ya Dimasukkan saja di bagian name servernya Sesuai dengan yang kita dapatkan dari bagian versel tadi Nanti dia akan menambahkan disana ya untuk alamatnya Contohnya disini alamat saya adalah dirumahrafif.id Nanti dia akan menambahkan nameserver yang perlu kita masukkan ke bagian domain kita Nantinya kalau proses untuk melakukan proses deploy sudah sukses Kemudian proses kita mengatur untuk bagian nameservernya juga sudah oke Maka ketika saya akses untuk alamat saya di rumah rafif.id Maka dia sudah menampilkan untuk project yang sudah saya miliki sebelumnya dengan menggunakan Vercel tadi Tetapi dia akan ditampilkan dengan menggunakan domain yang saya punya ya di rumah rafif.id ini. Misalnya ya sekarang saya akan coba untuk melakukan deploy. Misalnya untuk about me ini saya masukkan di bagian atas ya. Misalnya saya naikkan di bagian bawah dari statistik ini. Saya ctrl S.
Kemudian coba saya akan melakukan deploy. Saya tambahkan terminal baru. Saya akan buat dulu git add. Kemudian git commit main am, misalnya saja dinamakan perubahan lokasi about me.
Ya, oops sorry saya perlu masukkan dulu git config user.email dirumah rafif at email.com. Dan saya masukkan lagi untuk nama saya. Di rumah rafif.gmail.com misalnya.
Kemudian git. Saya ulangi dulu. Git add.
Git commit. Main am. Perubahan.
Lokasi. Kemudian saya masukkan git push origin main. Saya enter.
Nanti dia akan memasukkan untuk proyek saya ini. Perubahannya akan dimasukkan ke bagian dalam dari GitHub. Ketika kita masukkan dalam dari GitHub. Maka dia akan menampilkan untuk prosesnya melakukan.
deploy dari projek kita ini masuk ke bagian Vercel nah disini akan ada informasinya dia sudah di dalam status pending, coba kita refresh dulu masih dalam status pending coba sambil kita tunggu sampai dia memberikan pesan bahwa dia sukses ya, untuk melakukan proses deploy dari yang sebelumnya diletakkan di bagian GitHub ini dia akan dikirimkan ke bagian Vercel Sehingga kalau sudah masuk ke bagian Vercel, maka perubahannya langsung akan tampil di website sesuai dengan domain yang kita punya. Coba saya refresh lagi. Ya, sudah ada pesannya di sini bahwa sukses. Sekarang kalau misalnya saya masuk ke bagian website saya, dari yang sebelumnya tampilannya adalah di bagian bawah ya. Untuk info obat minya, sekarang kalau kita refresh nanti harusnya posisinya berada di bagian bawah dari statistik ini.
Coba saya refresh. Nah, seperti ini ya. Sekarang dia sudah berubah. Sehingga nantinya kalau misalnya saya akan melakukan perubahan, baik itu posisinya, ataupun kontennya, ataupun kupon yang saya miliki, maka tinggal saya lakukan update. Saya edit di bagian lokal saya.
Kemudian saya lakukan seperti hal yang saya lakukan tadi. Saya add, kemudian saya commit, kemudian saya push. Nantinya ketika proses deploy-nya sudah sukses, dia akan terkirim ke bagian Vercel.
Kemudian dia juga akan menggantikan. Tampilan dari website saya di rumahrafif.id Terima kasih sudah menonton dan Wassalamualaikum Wr. Wb