NextJSтегин динамикалык жолдору

NextJSте динамикалык жолдор түзүүгө болот. Мындай жолдордо URLдин бир бөлүгүнүн мааниси кокустук болушу мүмкүн. Мисалга /users/1 дарегин алалы, ал жердеги бир ордуна каалаган сан болушу мүмкүн, техникалык жактан алганда биз көргүзгүбүз келген колдонуучунун idси.

Бул учурда ар бир мүмкүн болгон сан үчүн көптөгөн папкалар түзүшүбүз керек эмес. Бул жол бөлүгүн динамикалык деп жарыялоо жетиштүү. Андан кийин ушул түрдөгү бардык сурамдарды жалпы файл page.jsx иштеп чыгат.

Динамикалык параметр түзүү үчүн тиешелүү папканын атын квадрат кашаанын ичине алуу керек. Биздин учурда бул төмөнкү папкалар түзүлүшү болот:

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

Келгиле, тиешелүү компонентти жасайлы:

export default function User() {
	return <p>
		колдонуучу
	</p>;
}

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

export default function User({ params }) {
	return <p>
		колдонуучу {params.id}
	</p>;
}

/city/:name түрүндөгү даректерди иштеп чыккан жолду жасагыла, мында :name ордуна каалаган сап болушу мүмкүн.

/show/:country/:city түрүндөгү даректерди иштеп чыккан жолду жасагыла, мында :country жана :city ордуна каалаган саптар болушу мүмкүн.

/post/:id түрүндөгү даректерди иштеп чыккан жолду жасагыла, мында :id ордуна каалаган сан болушу мүмкүн.

Төмөнкү массив берилсин:

let posts = [
	'пост1',
	'пост2',
	'пост3',
	'пост4',
	'пост5',
];

export default function Post() {
	
}

id параметринин маанисине жараша компоненттин версткасында тиешелүү пост көрсөтүлгөндөй кылыңыз.

/prod/:id түрүндөгү даректерди иштеп чыккан жолду жасагыла, мында :id ордуна каалаган сан болушу мүмкүн.

Төмөнкү массив берилсин:

let prods = [
	{
		id: 1,
		name: 'продукт1',
		cost: 100,
	},
	{
		id: 2,
		name: 'продукт2',
		cost: 200,
	},
	{
		id: 3,
		name: 'продукт3',
		cost: 300,
	},
];

export default function Prod() {
	
}

id параметринин маанисине жараша компоненттин версткасында тиешелүү продукт көрсөтүлгөндөй кылыңыз.