Pada tutorial ini akan membahas mengenai routing di next.js. Routing atau router dalam pengembangan web merupakan suatu mekanisme di mana permintaan HTTP diarahkan ke kode yang menanganinya. Sederhananya, di Router Anda menentukan apa yang harus terjadi ketika pengguna mengunjungi halaman tertentu.
Next.js memiliki struktur yang terdapat dalam folder app dalam pembuatan routing. Untuk gambaran dari struktur routing dengan menggunakan next.js sudah tersedia pada dokumentasi resmi next.js kalian bisa klik disini.
Pada Next.js versi 13 telah memperkenalkan App Router baru yang dibangun dengan menggunakan React Server Components, yang mendukung share layouts, nested routing, loading states, error handling, dan banyak lagi.
Baca Juga
App Router bekerja di direktori baru bernama app. Direktori ini akan bekerja bersama dengan direktori halaman untuk memungkinkan adopsi tambahan. Dengan ini memungkinkan anda untuk memilih beberapa rute aplikasi Anda ke dalam perilaku baru sambil menyimpan rute lain di direktori halaman untuk perilaku sebelumnya. Jika anda menggunakan direktori pages, lihat juga dokumentasi Pages Router.
Secara default, komponen di dalam aplikasi adalah React Server Components. Ini adalah pengoptimalan kinerja dan memungkinkan Anda mengadopsinya dengan mudah, dan Anda juga dapat menggunakan Komponen Klien.
Rute Bersarang
Untuk membuat rute bersarang, Anda dapat menumpuk folder di dalam satu sama lain. Misalnya, Anda dapat menambahkan rute baru /dashboard/settings dengan menyarangkan dua folder baru di direktori aplikasi.
Rute /dashboard/settings terdiri dari tiga segmen:
/(Root segment)dashboard(Segment)settings(Leaf segment)
Rute Dinamis
Menentukan rute dengan menggunakan jalur yang telah ditentukan tidak selalu cukup untuk aplikasi yang komplkes, oleh karena itu kita perlu menggunakan rute dinamis untuk menangani hal tersebut. Sebagai contoh dimana kita sedang membuat daftar blog pada website dan melihat detail dari setiap blog tersebut, jadi jika pengguna navigasi /blog akan menampilkan beberapa user yang terdaftar dan jika pengguna menggunakan url /blog/id akan menampilkan detail user.
Misalnya, blog dapat menyertakan halaman rute /blog/[slug].js berikut dengan [slug] adalah Segmen Dinamis untuk postingan blog.
import { useRouter } from 'next/router';
export default function Page() {
const router = useRouter();
return <p>Post: {router.query.slug}</p>;
}| Route | Example URL | Params |
app/blog/[slug].js | blog/a | { slug: 'a' } |
app/blog/[slug].js | blog/b | { slug: 'b' } |
app/blog/[slug].js | blog/c | { slug: 'c' } |
Catch-all Segments
Segmen Dinamis dapat diperluas untuk menangkap semua segmen berikutnya dengan menambahkan elipsis di dalam tanda kurung […folderName].
Misalnya, app/shop/[…slug].js akan cocok dengan /shop/clothes, tetapi juga /shop/clothes/tops, /shop/clothes/tops/t-shirts, dan seterusnya.
| Route | Example URL | Params |
app/shop/[...slug].js | /shop/a | { slug: ['a'] } |
app/shop/[...slug].js | /shop/a / b | { slug: ['a', 'b'] } |
app/shop/[...slug].js | /shop/a / b / c | { slug: ['a', 'b', 'c'] } |
Penutup
Pada tutorial ini kita telah membahas mengenai Routing di Next.js. Jika ada pertanyaan, Anda bisa langsung tulis di kolom komentar di bawah ini.