NextJS'te Dinamik Rotalar

NextJS'te dinamik rotalar oluşturabilirsiniz. Bu tür rotalar, URL'nin bir kısmının rastgele bir değere sahip olabileceğini varsayar. Örnek olarak, /users/1 adresini ele alalım, burada bir yerine herhangi bir sayı olabilir, teknik olarak çıktısını almak istediğimiz kullanıcının id'sine karşılık gelir.

Bu durumda, olası her sayı için çok sayıda klasör oluşturmamıza gerek yoktur. Bu kısmı dinamik olarak bildirmek yeterlidir. Bu durumda, bu türdeki tüm istekleri ortak bir page.jsx dosyası işleyecektir.

Dinamik bir parametre oluşturmak için, ilgili klasörün adını köşeli parantez içine almanız gerekir. Bizim durumumuzda bu, aşağıdaki klasör yapısı olacaktır:

/app//users//[id]/

İlgili bileşeni yapalım:

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

Bu durumda, belirlediğimiz parametre özel bir params nesnesinde tutulacaktır. Bu parametrenin değerini çıktı alalım:

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

Задание 1

/city/:isim şeklindeki adresleri işleyen bir rota yapın, burada :isim yerine herhangi bir dizi olabilir.

Задание 2

/show/:ülke/:şehir şeklindeki adresleri işleyen bir rota yapın, burada :ülke ve :şehir yerine herhangi bir dizi olabilir.

Задание 3

/post/:id şeklindeki adresleri işleyen bir rota yapın, burada :id yerine herhangi bir sayı olabilir.

Aşağıdaki dizi verilsin:

page.jsxlet posts = [
  'gönderi1',
  'gönderi2',
  'gönderi3',
  'gönderi4',
  'gönderi5',
];

export default function Post() {
  
}

id parametresinin değerine bağlı olarak bileşenin çıktısında ilgili gönderinin görüntülenmesini sağlayın.

Задание 4

/prod/:id şeklindeki adresleri işleyen bir rota yapın, burada :id yerine herhangi bir sayı olabilir.

Aşağıdaki dizi verilsin:

page.jsxlet prods = [
  {
    id: 1,
    name: 'ürün1',
    cost: 100,
  },
  {
    id: 2,
    name: 'ürün2',
    cost: 200,
  },
  {
    id: 3,
    name: 'ürün3',
    cost: 300,
  },
];

export default function Prod() {
  
}

id parametresinin değerine bağlı olarak bileşenin çıktısında ilgili ürünün görüntülenmesini sağlayın.