Saat pertama kali initiasi projek dengan nextjs didalam directory app kita akan menemukan layout.tsx dan page.tsx. layout sendiri adalah template untuk aplikasi kita, disana kita bisa mengatur html atau include komponen lain.sedangkan page.tsx adalah halaman index router kita. Berikut ini adalah struktur projek kita:

Layout dan page yang ada di root direktori app adalah halaman index pertama kita. Setiap directory didalam app adalah sebagai roouter, dimana agar dapat diakses harus mempunyai file halaman index yaitu page.jsx/tsx.

Berikut ini adalah contoh struktur directory di dalam folder app, dimana direktori yang mempunyai file page atau route. akan mempunyai akses.sedangkan folder yang tidak terdapat file page atau route tida akan bisa diakses routesnya. Berikut gambar dibawah ini adalah struktur app router.

Routing Pada Nextjs 13 memliliki beberapa fitur baru ataupun yang sudah ada pada versi sebelumnya.

Route Group

Route Group adalah fitur baru di nextjs 13. Nama Route Group ditutup dengan tanda kurung seperti (routeName). route group digunakan untuk memudahkan organisir struktur projek. ketika memangil folder route didalam folder group, maka nama folder group harus kita diabaikan. Lebih jelasnya seperti gambar dibawah ini:

Seperti contoh diatas nama Route groupnya adalah (marketing) dan juga (shop). Ketika kita memanggil route about dan blog maka kita cukup memanggil alamat seperti contoh: localhost:3000/about atau localhost:3000/blog. karna route group (marketing ) akan diabaikan

Dynamic Routes

Dynamic Routes Pada nextjs 13 masih sama dengan nextjs sebelumnya.

Dynamic routes adalah cara untuk membuat rute dalam aplikasi web yang menggunakan nilai dinamis sebagai bagian dari URL. Dengan kata lain, Anda dapat membuat halaman yang dapat menerima parameter dari URL dan merender konten sesuai dengan nilai parameter tersebut. Contoh URL dengan dynamic routes adalah sebagai berikut:

• /products/123: Di sini, “123” adalah parameter dinamis yang bisa menjadi ID produk yang berbeda.

Berikut adalah contoh sebuah halaman Produk dimana saat klik sebuah item produk, maka akan diarahkan kefile dynamic route

// app/produk/page.js
import Link from 'next/link';
const HomePage = () => {
  return (
    <div>
      <h1>Halaman Beranda</h1>
      <Link href="/products/123">
        <a>Lihat Detail Produk 123</a>
      </Link>
    </div>
  );
};
export default HomePage;

Berikut dibawah adalah kode untuk detail atau dynamic route nya:

// app/produk/[id]/page.js
import { useRouter } from 'next/router';

const ProductDetail = () => {
  const router = useRouter();
  const { id } = router.query;
  // Lakukan permintaan API atau database menggunakan nilai id
  // dan tampilkan detail produk di sini.
  return (
    <div>
      <h1>Detail Produk #{id}</h1>
      {/* Tampilkan detail produk di sini */}
    </div>
  );
};

export default ProductDetail;

Parallel Routes

Kita juga bisa menggunakan Paralele Routes , dimana nama folder di tandai dengan slots @namaFolder. Paralel Route digunakan untuk merender satu atau lebih didalam satu layout. mirip dengan kita include component didalam file layout.

Berikut adalah contoh struktur paralel router:

Seperti kita lihat struktur folder diatas. file page yang ada didalam folder @analytics dan @team akan di include di file layout.js di luarnya. Didalam layout sendiri kita harus inisiasi agar kedua file tersebut di include didalam layout. Sperti cotoh diatas maka file layout.js akan tampak seperti kode dibawah ini:

// app/layout.js
export default function Layout(props: {
  children: React.ReactNode
  analytics: React.ReactNode
  team: React.ReactNode
}) {
  return (
    <>
      {props.children}
      {props.team}
      {props.analytics}
    </>
  )
}

Sedangkan props children pada kode diatas adalah mengarah ke file app/page

Baca Juga Artikel seri Nextjs 13 dibawah ini:

1. Memulai Projek dengan Nextjs 13
2. Router di Nextjs 13
3. Route API Handler pada nextjs 13