NextJS-daky dynammik route-lar

NextJS-de dynammik route-lar döredip bolýar. Şeýle route-lar URL-iň bir böleginiň islendik baha alyp biljekdigini göz öňünde tutýar. Mysal üçin /users/1 adresini alyň, onda birlik ýerine islendik san bolup biler, tehniki taýdan ýaýdarlamak isleýän ulanyjymyzyň id-sine gabat gelýär.

Bu ýagdaýda, her bir mümkin bolan san üçin köp sanly papka döretmek zerur däl. Şu adresiň bölegini dynammik diýip yglan etmek ýeterlik. Bu ýagdaýda şuňa meňzep soraglary umumy page.jsx faýly işläp çykarar.

Dynammik parametr döretmek üçin, degisli papkanyň adyny kwadrat äýjikler içine almaly. Bizim ýagdaýymyzda bu aşakdaky papka gurluşy bolar:

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

Geliň, degişli komponenti dözeliň:

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

Şol bir wagtyň özünde kesgitlenen parametrimiz ýörite params obýektinde saklanar. Geliň, bu parametriň bahasyny çykaryş edeliň:

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

/city/:name görnüşindäki adresleri işleýän route dörediň, bu ýerde :name ýerine islendik setir bolup biler.

/show/:country/:city görnüşindäki adresleri işleýän route dörediň, bu ýerde :country we :city ýerine islendik setirler bolup biler.

/post/:id görnüşindäki adresleri işleýän route dörediň, bu ýerde :id ýerine islendik san bolup biler.

Aşakdaky massiw berlen:

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

export default function Post() {
	
}

id parametriň bahasyna baglylykda, komponentiň wertinkasyna degişli post çykaryş edilýändigi ýaly ediň.

/prod/:id görnüşindäki adresleri işleýän route dörediň, bu ýerde :id ýerine islendik san bolup biler.

Aşakdaky massiw berlen:

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 parametriň bahasyna baglylykda, komponentiň wertinkasyna degişli önüm çykaryş edilýändigi ýaly ediň.