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 के मान के आधार पर कंपोनेंट के मार्कअप में संबंधित प्रोडक्ट प्रदर्शित हो।