Դինամիկ Ռուտեր NextJS-ում

NextJS-ում կարելի է ստեղծել դինամիկ ռուտեր: Նման ռուտերը ենթադրում են, որ URL-ի մի մասը կարող է ունենալ կամայական արժեք: Օրինակի համար վերցնենք /users/1 հասցեն, որում միավորի փոխարեն կարող է լինել ցանկացած թիվ, տեխնիկապես համապատասխանող user-ի 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 պարամետրի արժեքից կոմպոնենտի վերտում արտածվի համապատասխան պրոդուկտը: