NextJS да Динамик Роутелар

NextJS да динамик роутеларни яратиш мумкин. Бундай роутелар URL нинг бир кисми ихтиёрий қийматга эга бўлиши мумкинлигини назарда тутади. Мисол учун /users/1 манзилини олайлик, бу ердаги 1 ўрнида қайсидир рақам бўлиши мумкин, техник жиҳатдан у биз кўрсатмоқчи бўлган фойдаланувчининг id сига мос келади.

Бундай ҳолда, биз ҳар бир мумкин бўлган рақам учун кўпгина папкалар яратишимиз шарт эмас. Бу манзилнинг шу кисмини динамик эълон қилиш кифоя. Бундай ҳолда, бундай турдаги барча сўровларни умумий page.jsx файли қайта ишлайди.

Динамик параметр яратиш учун, мос келувчи папка номини қавс ичига олиш керак. Бизнинг ҳолатимизда бу куйидаги папкалар тузилими бўлади:

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

Келинг, мос келувчи компонентни ясаймиз:

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

Биз белгилаган параметр махсус params объектида сақланади. Келинг, бу параметрнинг қийматини чиқарайлик:

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

/city/:name кўринишидаги манзилларни қайта ишловчи роут яратинг, бу ерда :name ўрнига ихтиёрий сатр бўлиши мумкин.

/show/:country/:city кўринишидаги манзилларни қайта ишловчи роут яратинг, бу ерда :country ва :city ўрнига ихтиёрий сатрлар бўлиши мумкин.

/post/:id кўринишидаги манзилларни қайта ишловчи роут яратинг, бу ерда :id ўрнига ихтиёрий рақам бўлиши мумкин.

Куйидаги массив берилган деб ҳисобланг:

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

export default function Post() {
	
}

id параметрининг қийматига қараб компонент версткасида мос келувчи пост чиқарилишини таъминланг.

/prod/:id кўринишидаги манзилларни қайта ишловчи роут яратинг, бу ерда :id ўрнига ихтиёрий рақам бўлиши мумкин.

Куйидаги массив берилган деб ҳисобланг:

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

export default function Prod() {
	
}

id параметрининг қийматига қараб компонент версткасида мос келувчи маҳсулот чиқарилишини таъминланг.