NextJS-də Dinamik Routlar

NextJS-də dinamik routlar yarada bilərsiniz. Belə routlar URL-in bir hissəsinin ixtiyari dəyərə malik ola biləcəyini nəzərdə tutur. Nümunə üçün /users/1 ünvanını götürək, burada birlik əvəzinə istənilən rəqəm ola bilər, texniki cəhətdən çıxarmaq istədiyimiz userin id-sinə uyğun gəlir.

Bu halda hər bir mümkün rəqəm üçün çoxlu qovluq yaratmağa ehtiyac yoxdur. Bu hissəni dinamik elan etmək kifayətdir. Bu halda bütün belə sorğuları ümumi page.jsx faylı işləyəcək.

Dinamik parametr yaratmaq üçün uyğun qovluğun adını kvadrat mötərizə içərisində yazmaq lazımdır. Bizim halda bu aşağıdakı qovluq quruluşu olacaq:

/app/
- /users/
  - /[id]/

Gəlin uyğun komponenti edək:

export default function User() {
	return <p>
		user
	</p>;
}

Bizim təyin etdiyimiz parametr xüsusi params obyektində saxlanılacaq. Gəlin bu parametrin dəyərini çıxaraq:

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

/city/:name tipli ünvanları işləyən route edin, burada :name əvəzinə istənilən sətir ola bilər.

/show/:country/:city tipli ünvanları işləyən route edin, burada :country və :city əvəzinə istənilən sətirlər ola bilər.

/post/:id tipli ünvanları işləyən route edin, burada :id əvəzinə istənilən rəqəm ola bilər.

Aşağıdakı massiv verilib:

let posts = [
	'post1',
	'post2',
	'post3',
	'post4',
	'post5',
];

export default function Post() {
	
}

Elə edin ki, id parametrinin dəyərindən asılı olaraq komponentin quruluşunda uyğun post çıxsın.

/prod/:id tipli ünvanları işləyən route edin, burada :id əvəzinə istənilən rəqəm ola bilər.

Aşağıdakı massiv verilib:

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

export default function Prod() {
	
}

Elə edin ki, id parametrinin dəyərindən asılı olaraq komponentin quruluşunda uyğun məhsul çıxsın.