Next Navigation - Chapter 2 (Bahasa Indonesia)
15 August, 2022
3
3
0
Contributors
.png?type=webp)
Thanks for reading..
Ini adalah chapter 2 dari pembahasan Next js as your Web Development Framework. Jika kamu beum membaca chapter sebelumnya silahkan kunjungi artkel tersebut pada link dibawah.
Ok, mari kita lanjutkan
Akan sulit ketika harus mengetikkan seluruh path untuk masuk ke page tertentu, akan lebih baik kita menentukan navigasi pada halaman utama kita agar user dapat mengakses halaman tertentu lebih mudah
Pada HTML, salah satu cara untuk menerapkan navigation adalah menggunakan hyperlink (<a>). user kemudian dapat pergi menuju path atau link yang disematkan pada tag tersebut
Di Next.js, untuk menavigasi antar routes dalam satu aplikasi tidak direkomendasikan menggunakan cara diatas. Next.js memiliki built-in component untuk mengatasi hal ini yaitu next-link dan next-router
next-link
next-link memiliki fungsi utama yang mirip seperti hyperlink. Component ini membutuhkan attribute href untuk menentukan tujuan navigasi. Gunakan next-link hanya untuk menavigasi antar routes. Jika tujuan navigasi berupa external link, gunakan hyperlink tag. Untuk attribute lainnya, bisa dibaca di next-link
Contoh paling sederhana adalah menggunakannya pada navigasi menu. Kita hanya perlu membuat component tersebut kepada setiap menu dan ditujukan pada page yang dituju.
Navigation with next-link
next-router
Di chapter sebelumnya, kita telah bersinggungan dengan component ini. next-router memungkinkan kita memanfaatkan page routes lebih banyak dimana next-link tidak miliki. kita dapat akses fungsionalitas next-router pada react hook useRouter.
useRouter dapat mengembalikan router object yang memiliki fungsi masing-masing yang bisa dimanfaatkan dan dimanipulasi. Untuk mengetahui object router yang tersedia bisa dibaca di next-router.
Sekarang kita akan bahas method yang bisa kita gunakan untuk bernavigasi.
useRouter().push() atau router.push()
Gunakan push method untuk menavigasi menuju url atau path. Cara ini cocok untuk menavigasi antar halaman.
useRouter().replace() atau router.replace()
Sama seperti push method, bedanya url atau path yang dituju tidak dimasukkan ke dalam list history.
router.prefetch(), router.back(), and router.reload()
•
router.prefetch() digunakan untuk prefetech url sehingga components yang terasosiasi akan dipersiapkan pada initial render. Imbasnya adalah load component yang lebih cepat.
•
router.back() memiliki fungsi yang sama seperti meng-klik tombol 'back' pada browser
•
router.reload() akan menjalankan fungsi reload pada halaman
Use Cases: Product Navigation
Coba kita praktikan, let say kita buat struktur file seperti berikut:
Folder product memiliki file index.js supaya kita bisa memiliki halaman Product Home yang berisi daftar produk dalam aplikasi kita. Kemudian masing-masing produk kita navigasikan seusai dengan productId yang dituju.
Kemudian pada folder [productId] kita buat pula index.js agar setiap produk dapat memiliki halamannya masing-masing. Kemudian kita buat sebuah tombol dengan router.push untuk menavigasikan kembali ke halaman utama produk
Jika sudah sesuai, maka hasilnya kurang lebih seperti berikut:
File Structure and Page Routing Summary
Congrats bro,
Kita sudah selesai di pada tahap awal memahami bagaimana Next.js bekerja khususnya dalam lingkup File Structure dan Page routing. Berikut adalah poin penting yang kita pelajari:
1.
Page-based Routing Mechanism, dimana file dan folder dalam pages terasosiasikan kepada routes sesuai penamaan file
2.
Nested Folder Structure, memiliki peranan yang sama dalam sistem routing di nextjs
3.
Dynamic Routes, digunakan untuk halaman dinamis dengan menambahkan notasi '[ ]' pada penamaan file atau folder
4.
All Catch Routes, digunakan untuk menerapkan halaman di layout page yang sama dimana beberapa parameter routes tidak pasti, dapat berubah, ataupun opsional
5.
Gunakan next-link component untuk menavigasi on click pada element
6.
Gunakan next-router method untuk menavigasi secara terprogam (Programmatically Routing)
Next Chapter: The concept of Pre-rendering in Next.js
Next chapter, kita akan bahas bagaimana Next.js membantu kita mengaplikasikan page rendering yang menjadi salah satu keunggulan dari penggunaan Next.js.
react
web development
next.js
next.js navigation
fullstack framework