Hallo teman-teman developer web! Pada artikel ini, kita akan membahas apa itu dynamic routes di Next.js. Mulai dari konsep dasarnya, sampai bagaimana cara mengimplementasikannya dalam project kamu.
Yuk langsung saja kita bahas🚀
Pengenalan Dynamic Routes
Mungkin kamu sering mendengar istilah dynamic routes saat membangun situs web. Tapi apa sih sebenernya dynamic routes itu? Tenang aja, kita akan bahas sekarang.
Jadi begini, saat kamu membuat sebuah situs web, terkadang kamu perlu membuat rute atau jalur untuk berbagai halaman. Misalnya, rute untuk beranda, tentang kami, atau artikel di blogmu. Nah, dynamic routes itu adalah cara untuk membuat rute yang bisa menyesuaikan diri dengan data yang berubah-ubah.
Bayangkan kamu punya situs blog. Setiap artikel di blogmu punya tautan unik, kan? Nah, dynamic routes ini membantu kamu membuat tautan yang berubah sesuai dengan judul artikel atau halaman yang kamu buat.
Contohnya, mungkin kamu punya artikel dengan judul "Tips Jitu Meningkatkan Produktivitas". Kamu bisa membuat rute khusus untuk artikel ini menggunakan dynamic routes. Jadi, ketika seseorang mengunjungi tautan blogmu dengan judul "tips-jitu-meningkatkan-produktivitas", halaman itu akan muncul secara otomatis. Ini artinya, kamu nggak perlu buat rute baru setiap kali kamu nulis artikel baru.
Jadi, intinya dynamic routes ini sangat membantu saat kamu punya banyak halaman atau data yang berubah terus. Mereka membuat situs web-mu lebih fleksibel dan mudah diatur. Jadi, sekarang kamu udah tahu kan apa itu dynamic routes? Yuk, kita coba implementasikan!
Implementasi Dynamic Routes
Kita bahas soal penamaan. Jadi, ketika kamu bikin dynamic routes, kamu harus pake kurung siku [ ] pada folder. Misalnya, [slug] atau [id]. Ini berguna biar Next.js tahu kalau bagian itu dinamis dan bisa berubah tergantung data yang diakses.
Lalu, gimana cara implementasinya? Gampang kok! Misalnya, kita punya blog dan mau bikin halaman untuk tiap artikel dengan dynamic routes.
Ikuti langkah-langkah berikut:
Pertama: Membuat Folder dan File
Kamu bisa membuat halaman blog dengan bikin folder dan file seperti ini “blog/[slug]/page.js”. Nah, [slug] di sini bisa diganti dengan judul unik dari artikelmu.
Kedua: Konfigurasi page.js
Selanjutnya adalah kita harus mengambil sebuah slug dari params dan menampilkannya di browser. Kamu bisa copy kode di bawah ini:
export default function Page({ params }) {
return <div>My Post: {params.slug}</div>
}
Pada kode di atas, artinya kita menerima sebuah props bernama params. Nah, params tersebut memiliki sebuah slug karena kita telah mendefiniskannya dengan membuat folder [slug] .
Ketiga: Jalankan Project
Selanjutnya adalah kita bisa menjalankan project nya terlebih dahulu, apakah berhasil atau tidak. Kamu bisa menjalankannya terlebih dahulu dengan perintah berikut:
npm run dev
Jika sudah berhasil dijalankan, kamu bisa mengakses halaman blog kamu di http://localhost:3000/blog/example.
Pada contoh kali ini kita akan mengakses blog dengan judul “Kenapa Harus Belajar di BuildWithangga", maka kamu hanya perlu mengaksesnya di browser dengan alamat http://localhost:3000/blog/kenapa-harus-belajar-di-buildwithangga. Nah, Next.js bakal otomatis mengerti kalau setiap judul artikel baru itu adalah halaman baru.
Contoh gambarnya seperti ini:
Jadi, kamu bisa bikin banyak halaman tanpa repot-repot nambahin rute baru satu per satu. Lumayan kan? Dynamic routes ini memudahkan kamu dalam mengelola situs web-mu, terutama kalau kamu punya banyak data yang berubah-ubah.
Pentingnya Dynamic Routes
Kamu pasti pernah mikir, "Kenapa sih penting banget dynamic routes itu?" Nah, tenang aja, kita bakal bahas tentang pentingnya dynamic routes
Pertama-tama, bayangkan kamu punya situs web yang isinya banyak banget, misalnya situs berita atau blog. Nah, di situs kayak gitu, pasti banyak banget halaman yang harus dibuat. Kalau kita harus bikin satu-satu rute buat setiap halaman, wah, bisa repot banget!
Nah, inilah kehebatan dynamic routes. Dengan dynamic routes, kamu bisa membuat rute yang bisa menyesuaikan diri dengan data yang berubah-ubah. Misalnya, kamu punya blog dengan banyak artikel. Setiap artikel punya tautan unik, kan? Nah, dynamic routes ini bantu kamu buat tautan-tautan itu tanpa harus buat rute baru satu per satu.
Selain itu, dynamic routes juga bikin situs web-mu lebih fleksibel. Maksudnya, kamu bisa dengan mudah menyesuaikan rute berdasarkan permintaan pengguna. Jadi, misalnya ada pengunjung yang cari artikel tertentu, kamu bisa tunjukin halaman artikel itu tanpa masalah.
Selain itu lagi, dynamic routes juga membantu kamu dalam membuat aplikasi yang lebih skalabel. Artinya, kalau situs web-mu tumbuh besar, dynamic routes ini bisa ngebantu kamu mengelola semua halaman dengan lebih efisien.
Kesimpulan
Sekarang kamu udah tau nih tentang dynamic routes di Next.js! Singkatnya, dynamic routes ini adalah cara membuat rute yang bisa berubah-ubah sesuai dengan data yang kamu punya. Buat situs web yang banyak halamannya, dynamic routes ini bakal berguna sekali.
Dengan dynamic routes, kamu bisa bikin tautan-tautan unik untuk setiap data, seperti artikel di blogmu. Tidak perlu repot bikin rute baru satu per satu. Selain itu, dynamic routes ini juga bikin situs web kamu lebih fleksibel, karena bisa menyesuaikan diri dengan permintaan pengguna.
Bagi kamu yang ingin mengeksplorasi lebih lanjut, kamu bisa mengikuti kelas di BuildWithAngga. Ada Kelas Online Gratis NextJS Basic dan proyek berbasis web development lainnya seperti Kelas Online Bootcamp Full-Stack Web Developer: Sewa Mobil.
Jadi, mari kita tingkatkan kemampuan bersama BuildWithAngga! 🚀
Sampai jumpa!
