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:

export 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:

export default function User({ params }) {
	return <p>
		kullanıcı {params.id}
	</p>;
}

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

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

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

Aşağıdaki dizi verilsin:

let 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.

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

Aşağıdaki dizi verilsin:

let 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.