NextJS-тегі динамикалық жолдар

NextJS-те динамикалық жолдар жасауға болады. Мұндай жолдар URL-нің бір бөлігі ерікті мәнге ие болуы мүмкін деп есептейді. Мысал ретінде /users/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 параметрінің мәніне байланысты компоненттің нұсқасында сәйкес өнім шығарылуы үшін жасаңыз.