Routing

Static Routing

Di dalam Next.js kamu bisa menggunakan routing dengan cara membuat folder dengan nama route-nya di dalam folder app. Contoh:

app
├── about
│   └── page.js
└── login
    └── page.js

Adapun isi dari file page.js tersebut adalah sebagai berikut:

export default function About() {
  return (
    <div>
      <h1>About us</h1>
    </div>
  );
}

export default function Login() {
  return (
    <div>
      <h1>Log in</h1>
    </div>
  );
}

Dynamic Routing

Selain static routing, kamu juga bisa menggunakan dynamic routing. Dynamic routing ini biasanya digunakan untuk membuat routing yang dinamis. Contoh:

app
└── users
    └── [id]
        └── page.js

Adapun isi dari file page.js tersebut adalah sebagai berikut:

export default function User({ params }) {
  const { id } = params;
 
  return (
    <div>
      <h1>User {id}</h1>
    </div>
  );
}