A. Routing

Sumber : https://nextjs.org/docs/app/building-your-application/routing

Routing meerupakan proses mengarahkan satu halaman web ke halaman web lainnya dalam suatu aplikasi. Routing memungkinkan kita untuk membuat aplikasi web dengan beberapa halaman, yang sangat berguna ketika kita ingin membuat aplikasi yang lebih kompleks dengan navigasi antarhalaman.

NextJs menyediakan mekanisme pembuatan routing yang sangat simple dibandingkan jika kita menggunakan reactjs.

1. Basic Routing

Untuk membuat route standart di nextjs 13 dengan folder app. buatlah folder dengan nama tertentu misalkan about kemudian buatlah file dengan nama page.tsx seperti gambar di bawah ini.

app/about/page.tsx

const About = () => {
    return (
        <div>Ini adalah page About</div>
    )
}


export default About

Jalankan pada Browser

2. Nested Route

Untuk membuat Nested Route di nextjs 13 dengan folder app. buatlah folder dengan nama tertentu misalkan about kemudian buat kembali folder dan buatlah file page.tsx pada folder tersebut seperti gambar di bawah ini.

app/about/contact.tsx

const Contact = () => {
    return (
        <div>Ini adalah page Contact</div>
    )
}


export default Contact

Jalankan pada Browser

3. Dynamic Route

Untuk membuat Dynamic Route di NextJS 13 dengan membuat nama folder dalam square brackets []

Pada gambar di atas kita square brackets folder [id] yang artinya nama params dari dynamic route adalah id. Sehinggal implentasi pada detail/page.tsx seperti berikut.

app/about/[id]/detail/page.tsx

const DetailPage = ({ params }: { params: { id: string } }) => {
  let { id } = params;

  return <div>Ini adalah page Detail dengan {id} </div>;
};

export default DetailPage;

Jalankan pada Browser