Роутҳои динамикӣ дар 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 = [
	'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 дар верстаи компонент маҳсули мувофиқ чоп карда шавад.