Terakhir diperbarui: 2024-03-13

Routing

Pada codelab ini Anda akan mempelajari tentang pembuatan routing dan navigasi untuk berpindah halaman menggunakan App Router di NextJs.

Pengetahun yang Anda harus miliki

Sebelum memulai codelab ini, sebaiknya Anda memiliki pengetahuan dasar tentang:

Apa yang Anda akan pelajari

Apa yang Anda perlu persiapkan

Di React, anda dapat membuat Single Page Application (SPA) dengan memanfaatkan konsep routing. Routing di React dengan NextJS memanfaatkan susunan filesystem secara hierarkikal dalam folder app (App Router) untuk versi sebelumnya NextJS menggunakan folder pages (Page Router).

Singkatnya, Anda dapat membuat menu atau tautan di halaman web yang ketika diklik dapat memuat konten tanpa reload atau refresh halaman web. Jadi, seakan-akan kita berada di satu halaman web yang sama, karena itu disebut aplikasi satu halaman (Single Page Application / SPA). Untuk memahaminya lebih lanjut, silakan lakukan praktikum berikut ini.

Pada praktikum ini, Anda akan membuat 3 halaman yang di-handle oleh router, yaitu halaman home, halaman about dan halaman profile. Silakan lakukan langkah-langkah praktikum berikut ini.

  1. Persiapkan project dengan memanfaatkan template repository yang telah dipersiapkan di alamat https://github.com/dhanifudin/routing-demo dan gunakan tombol Use this template kemudian pilih Create a new repository.
  2. Clone project ke lokal laptop anda dan lakukan instalasi dependencies dengan menjalankan perintah berikut.
npm install
  1. Silahkan buka project tersebut dengan menggunakan VSCode dan perhatikan file yang ada dalam folder app.
  2. Routing di ReactJS dengan NextJS memanfaatkan organisasi penamaan folder dan file pada folder app. Silahkan tambahkan file page.tsx di dalam folder app, dan buatlah komponen dengan kode berikut.
export default function Home() {
  return <h1>Welcome to Home</h1> ;
}
  1. Jalankan project dengan menggunakan perintah npm run dev di terminal VSCode. Dan silahkan buka browser pada alamat url http://localhost:3000
  2. Perhatikan pada project di VSCode, akan terdapat sebuah file yang akan digenerate yaitu layout.tsx. File ini akan secara otomatis digenerate jika tidak ditemukan. Perhatikan susunan kode yang ada didalamnya. Anda akan menemukan susunan html yang di dalamnya terdapat props children. Props children akan di-replace oleh komponen sesuai dengan routing.
  3. Untuk membuat halaman routing /about dengan NextJS, silahkan buat folder /about dalam /app dan buat file dengan nama page.tsx. Kemudian buat function komponen seperti pada kode berikut.
  4. Lakukan commit ke project setelah menyelesaikan semua Praktikum 1. Jangan lupa untuk mendokumentasikan dengan tangkapan layar dan menyimpan di folder /images di project anda.
export default function About() {
  return <h1>Welcome to About</h1> ;
}

Anda dapat membuat routing bersarang, maksudnya ketika suatu link diklik di dalam link tersebut terdapat daftar link atau menu yang dapat diklik juga. Jadi, dalam praktikum ini akan dibuat susunan URL atau link seperti berikut:

Link utama

Link bersarang

/

/about

/blogs

/blogs/first

/blogs

/blogs/second

Untuk memahaminya, silakan lakukan langkah-langkah praktikum berikut ini:

  1. Dengan menggunakan konsep yang sama pada Praktikum 1, silahkan tambahkan susunan folder /blogs/first dan /blogs/second. Kemudian tambahkan masing-masing untuk setiap folder dengan file page.tsx.
  2. Pada file /blogs/page.tsx buatlah function component seperti kode berikut atau anda dapat mengkreasikan tampilan dengan selera anda!
export default function Blog() {
  return (
        <h1>Blog</h1>
  );
}
  1. Pada file /blogs/first/page.tsx buatlah function component seperti berikut:
export default function FirstBlog() {
  return (
        <h1>First Blog</h1>
  );
}
  1. Cobalah akses halaman /blogs dan /blogs/first pada browser anda.
  1. Lakukan commit ke project setelah melengkapi semua Praktikum 2 dan dokumentasikan hasil pengerjaan praktikum dengan tangkapan layar.

Anda dapat membuat routing secara dinamis, maksudnya ketika suatu link diakses akan ditambahkan dengan suatu url path yang nilainya dapat berubah secara dinamis. Jadi, dalam praktikum ini akan dibuat susunan URL atau link seperti berikut:

Link utama

Link dinamis

/products

/products/1

/products

/products/2

/products

/products/3

Untuk memahaminya, silakan lakukan langkah-langkah praktikum berikut ini:

  1. Buatlah file /products/page.tsx yang berisi function component untuk menampilkan list dari products seperti kode berikut.
export default function ProductList() {
  return (
        <div>
          <h1>Product List</h1>
          <h2>Product 1</h2>
          <h2>Product 2</h2>
          <h2>Product 3</h2>
        </div>
  );
}
  1. Untuk mendefinisikan url path di NextJs menggunakan konvensi penamaan direktori dengan mengapit nama path dengan simbol [ ]. Sebagai contoh: [productId] menandakan bahwa path dinamis menggunakan variabel productId (Catatan: Anda boleh menuliskan hanya dengan [id], tetapi untuk mempermudah pembacaan konteks sebaiknya jangan gunakan hanya id).
  2. Kemudian buatlah file page.tsx pada lokasi /app/products/[productId] dan tambahkan kode sebagai berikut.
type Props = {
  params: {
        productId: string
  }
}

export default function ProductDetails({ params }: Props) {
  return (
        <h1>Details about product {params.productId}</h1>
  )
}
  1. Untuk mendapatkan nilai path, anda dapat menggunakan pemanggilan params.productId. Pemanggilan atribut params, disesuaikan dengan pendefinisian nama path.
  2. Cobalah akses halaman /products dan /products/1 pada browser anda. Ubah nilai productId dengan nilai lainnya.
  1. Lakukan commit ke project setelah melengkapi semua Praktikum 3 dan dokumentasikan hasil pengerjaan praktikum dengan tangkapan layar.

Pada Praktikum sebelumnya Anda telah berhasil membuat routing, tetapi belum dapat menampilkan link navigasi di dalam Project. Untuk melakukan navigasi, anda dapat menggunakan Link komponen yang disediakan oleh library NextJs.

Untuk memahaminya, silakan lakukan langkah-langkah praktikum berikut ini:

  1. Pada file /app/page.tsx tambahkan import Link komponen seperti kode berikut.
import Link from "next/link";
  1. Tambahkan penggunaan Link komponen untuk mengakses halaman /profile dan /about
export default function Home() {
  return (
        <div>
          <h1>Welcome to Home</h1>
          <Link href='/profile'>Profile</Link>
          <Link href='/about'>About</Link>
        </div>
  );
}
  1. Coba buka browser anda dan cobalah untuk bernavigasi menggunakan Link komponen.
  1. Lakukan commit ke project setelah melengkapi semua Praktikum 4 dan dokumentasikan hasil pengerjaan praktikum dengan tangkapan layar.

Selamat, Anda telah berhasil menyelesaikan codelab ini. Semoga mendapat ilmu yang bermanfaat.

Apa selanjutnya?

Silakan cek beberapa sumber belajar lainnya...

Referensi