Rute Dinamis di NextJS

Di NextJS, kita dapat membuat rute dinamis. Rute seperti ini mengasumsikan bahwa sebagian dari URL dapat memiliki nilai yang sembarang. Sebagai contoh, mari kita ambil alamat /users/1, di mana angka 1 dapat diganti dengan angka apa pun, yang secara teknis sesuai dengan id pengguna yang ingin kita tampilkan.

Dalam kasus ini, kita tidak perlu membuat banyak folder untuk setiap angka yang mungkin. Cukup dengan mendeklarasikan bagian alamat ini sebagai dinamis. Dalam hal ini, semua permintaan dengan format seperti itu akan diproses oleh file umum page.jsx.

Untuk membuat parameter dinamis, nama folder yang sesuai perlu ditempatkan dalam tanda kurung siku. Dalam kasus kita, struktur foldernya akan menjadi seperti ini:

• /app//users//[id]/

Mari kita buat komponen yang sesuai:

app/users/[id]/page.jsxexport default function User() {
  return <p>
    user
  </p>;
}

Parameter yang kita tentukan akan disimpan dalam objek khusus params. Mari kita tampilkan nilai parameter ini:

app/users/[id]/page.jsxexport default function User({ params }) {
  return <p>
    user {params.id}
  </p>;
}

page.jsxlet posts = [
  'post1',
  'post2',
  'post3',
  'post4',
  'post5',
];

export default function Post() {
  
}

page.jsxlet prods = [
  {
    id: 1,
    name: 'prod1',
    cost: 100,
  },
  {
    id: 2,
    name: 'prod2',
    cost: 200,
  },
  {
    id: 3,
    name: 'prod3',
    cost: 300,
  },
];

export default function Prod() {
  
}