डायनामिक रूट वे पृष्ठ होते हैं जो आपको URL में कस्टम पैरामीटर का उपयोग करने की अनुमति देते हैं। गतिशील सामग्री के लिए पृष्ठ बनाते समय वे विशेष रूप से लाभकारी होते हैं।

किसी ब्लॉग के लिए, आप ब्लॉग पोस्ट के शीर्षकों के आधार पर URL बनाने के लिए डायनेमिक रूट का उपयोग कर सकते हैं। यह दृष्टिकोण प्रत्येक पोस्ट के लिए पेज घटक बनाने से बेहतर है।

आप दो कार्यों को परिभाषित करके Next.js में गतिशील मार्ग बना सकते हैं: getStaticProps और getStaticPaths।

Next.js में डायनेमिक रूट बनाना

Next.js में डायनेमिक रूट बनाने के लिए, पेज में ब्रैकेट जोड़ें। उदाहरण के लिए, [पैराम्स].जेएस, [स्लग].जेएस या [आईडी].जेएस।

ब्लॉग के लिए, आप डायनामिक रूट के लिए स्लग का उपयोग कर सकते हैं। तो, अगर किसी पोस्ट में स्लग था डायनेमिक-रूट्स-नेक्स्टजेएस, परिणामी URL होगा https://example.com/dynamic-routes-nextjs.

पेज फ़ोल्डर में, [स्लग] .js नामक एक नई फ़ाइल बनाएं और पोस्ट घटक बनाएं जो पोस्ट डेटा को प्रॉप के रूप में लेता है।

कॉन्स्ट पोस्ट = ({पोस्टडाटा}) => {
 वापस करना <डिव>{/* संतुष्ट */}</div>;
};

पोस्ट डेटा को पोस्ट में पास करने के विभिन्न तरीके हैं। आपके द्वारा चुनी गई विधि इस बात पर निर्भर करती है कि आप पृष्ठ को कैसे प्रस्तुत करना चाहते हैं। बिल्ड समय के दौरान डेटा लाने के लिए, getStaticProps() का उपयोग करें और इसे अनुरोध पर प्राप्त करने के लिए, getServerSideProps() का उपयोग करें।

instagram viewer

पोस्ट डेटा प्राप्त करने के लिए getStaticProps का उपयोग करना

ब्लॉग पोस्ट अक्सर नहीं बदलते हैं, और निर्माण के समय उन्हें प्राप्त करना पर्याप्त होता है। इसलिए, getStaticProps() को शामिल करने के लिए पोस्ट घटक को संशोधित करें।

आयात {getSinglePost} से "../../utils/posts";
कॉन्स्ट पोस्ट = ({सामग्री}) => {
 वापस करना <डिव>{/* संतुष्ट */}</div>;
};
निर्यातकॉन्स्ट गेटस्टैटिकप्रॉप्स = async ({पैराम्स}) => {
कॉन्स्ट पोस्ट = इंतजार getSinglePost (पैराम्स.स्लग);
वापस करना {
 सहारा: {...पोस्ट},
 };
 };

GetStaticProps फ़ंक्शन पृष्ठ पर प्रदान किए गए पोस्ट डेटा उत्पन्न करता है। यह getStaticPaths फ़ंक्शन द्वारा उत्पन्न पथों से स्लग का उपयोग करता है।

पाथ प्राप्त करने के लिए getStaticPaths का उपयोग करना

GetStaticPaths() फ़ंक्शन उन पृष्ठों के लिए पथ लौटाता है जिन्हें पूर्व-रेंडर किया जाना चाहिए। इसे शामिल करने के लिए पोस्ट घटक बदलें:

निर्यातकॉन्स्ट getStaticPaths = async () => {
कॉन्स्ट पथ = getAllPosts ()। नक्शा (({स्लग}) => ({ पैरामीटर: {स्लग}}));
वापस करना {
 पथ,
 मैदान छोड़ना: असत्य,
 };
};

GetStaticPaths का यह कार्यान्वयन उन सभी पदों को प्राप्त करता है जिन्हें प्रस्तुत किया जाना चाहिए और स्लग को पैराम के रूप में लौटाता है।

कुल मिलाकर, [स्लग] .js इस तरह दिखेगा:

आयात {getAllPosts, getSinglePost} से "../../utils/posts";
कॉन्स्ट पोस्ट = ({सामग्री}) => {
 वापस करना <डिव>{संतुष्ट}</div>;
};


निर्यातकॉन्स्ट getStaticPaths = async () => {
कॉन्स्ट पथ = getAllPosts ()। नक्शा (({स्लग}) => ({ पैरामीटर: {स्लग}}));
वापस करना {
 पथ,
 मैदान छोड़ना: असत्य,
 };
};


निर्यातकॉन्स्ट गेटस्टैटिकप्रॉप्स = async ({पैराम्स}) => {
कॉन्स्ट पोस्ट = इंतजार getSinglePost (पैराम्स.स्लग);


वापस करना {
 सहारा: {...पोस्ट},
 };
};
निर्यातगलती करना डाक;

डायनेमिक रूट बनाने के लिए आपको getStaticProps() और getStaticPaths() का एक साथ उपयोग करना होगा। GetStaticPaths() फ़ंक्शन को गतिशील मार्ग उत्पन्न करना चाहिए, जबकि getStaticProps() प्रत्येक मार्ग पर प्रदान किए गए डेटा को प्राप्त करता है।

Next.js में नेस्टेड डायनेमिक रूट बनाना

Next.js में नेस्टेड रूट बनाने के लिए, आपको पेज फोल्डर के अंदर एक नया फोल्डर बनाना होगा और इसके अंदर डायनेमिक रूट को सेव करना होगा।

उदाहरण के लिए, /pages/posts/dynamic-routes-nextjs बनाने के लिए, अंदर [slug].js सेव करें /pages/posts.

डायनेमिक रूट से URL पैरामीटर एक्सेस करना

मार्ग बनाने के बाद, आप पुनः प्राप्त कर सकते हैं यूआरएल पैरामीटर useRouter() का उपयोग कर गतिशील मार्ग से प्रतिक्रिया हुक.

पृष्ठों/[स्लग] .js के लिए, स्लग को इस प्रकार प्राप्त करें:

आयात {यूज़ राउटर} से 'अगला/राउटर'
कॉन्स्ट पोस्ट = () => {
कॉन्स्ट राउटर = यूज़ राउटर ()
कॉन्स्ट {स्लग} = राउटर.क्वेरी
 वापस करना <पी>पोस्ट: {स्लग}</पी>
}
निर्यातगलती करना डाक

यह पोस्ट के स्लग को प्रदर्शित करेगा।

GetServerSideProps के साथ डायनेमिक रूटिंग

Next.js का उपयोग करके आप बिल्ड समय पर डेटा प्राप्त कर सकते हैं और डायनेमिक रूट बना सकते हैं। आप इस ज्ञान का उपयोग वस्तुओं की सूची से पृष्ठों को प्री-रेंडर करने के लिए कर सकते हैं।

यदि आप प्रत्येक अनुरोध पर डेटा प्राप्त करना चाहते हैं, तो getStaticProps के बजाय getServerSideProps का उपयोग करें। ध्यान दें कि यह दृष्टिकोण धीमा है; नियमित रूप से बदलते डेटा का उपभोग करते समय आपको इसका उपयोग करना चाहिए।