Next.Js 13 समानांतर मार्ग: एक व्यापक मार्गदर्शिका

1 परिचय

नमस्ते!

Next.js में समानांतर मार्गों पर इस व्यापक मार्गदर्शिका में आपका स्वागत है।

जैसे-जैसे डिजिटल परिदृश्य विकसित होता है, वैसे-वैसे वेब विकास की जटिलताएँ भी बढ़ती हैं। आधुनिक वेब अनुप्रयोगों को उपयोगकर्ता अनुभव को बढ़ाने और जटिल डिजाइन संरचनाओं को समायोजित करने के लिए न केवल मजबूत, बल्कि बहुमुखी रूटिंग तंत्र की भी आवश्यकता होती है।

यह लेख Next.js 13.3 - पैरेलल रूट्स में पेश की गई शक्तिशाली सुविधा को समझने के लिए सावधानीपूर्वक तैयार किया गया है।

उद्देश्य दोतरफा है: पहला, समानांतर मार्गों और उनके व्यावहारिक अनुप्रयोगों के महत्व की स्पष्ट समझ प्रदान करना, और दूसरा, अपने नेक्स्ट.जेएस प्रोजेक्ट्स में उन्हें कुशलतापूर्वक लागू करने के लिए व्यावहारिक अंतर्दृष्टि प्रदान करना।

आइए समानांतर मार्गों की परिवर्तनकारी क्षमता का पता लगाने और वे वेब एप्लिकेशन डिज़ाइन की सीमाओं को कैसे फिर से परिभाषित कर रहे हैं, इस यात्रा को शुरू करें।

2. समानांतर मार्गों से पहले की दुनिया

समानांतर मार्गों की शुरुआत से पहले, वेब डेवलपर्स सीमित थे कि वे एक ही दृश्य पर सामग्री को गतिशील रूप से कैसे संरचना और प्रदर्शित कर सकते हैं। पारंपरिक रूटिंग तंत्र काफी रैखिक थे: एक यूआरएल, एक दृश्य।

उदाहरण के लिए, एक विशिष्ट डैशबोर्ड डिज़ाइन पर विचार करें:

 // pages/dashboard/user.js function User() { return <div>User Dashboard</div>; } // pages/dashboard/team.js function Team() { return <div>Team Dashboard</div>; }

/dashboard/user पर नेविगेट करने से उपयोगकर्ता डैशबोर्ड प्रस्तुत होगा, जबकि /dashboard/team टीम डैशबोर्ड दिखाएगा। दोनों परस्पर अनन्य थे। किसी भिन्न खंड को देखने के लिए, उपयोगकर्ता को आम तौर पर अपने वर्तमान दृश्य से पूरी तरह दूर जाना होगा।

इससे चुनौतियाँ उत्पन्न हुईं, खासकर जब डेवलपर्स किसी वेबसाइट के कई खंडों को एक साथ या सशर्त प्रदर्शित करना चाहते थे। पारंपरिक रूटिंग दृष्टिकोण में लचीलेपन की कमी थी, जिससे जटिल राज्य प्रबंधन या वर्कअराउंड का सहारा लिए बिना साइड-बाय-साइड डैशबोर्ड या मॉडल जैसे जटिल, इंटरैक्टिव लेआउट बनाना कठिन हो गया।

शुक्र है, नेक्स्ट.जेएस जैसे फ्रेमवर्क के विकास और समानांतर मार्गों की शुरूआत के साथ, इस परिदृश्य में काफी बदलाव आया है, जिससे गतिशील और अनुकूली वेब डिज़ाइन के एक नए युग की शुरुआत हुई है।

3. समानांतर मार्गों को समझना

पैरेलल रूट्स नेक्स्ट.जेएस 13.3 में पेश की गई अभूतपूर्व विशेषताएं हैं, जो डेवलपर्स के रूटिंग और वेब पर सामग्री की प्रस्तुति के तरीके को महत्वपूर्ण रूप से बदल देती हैं।

3.1 समानांतर मार्गों का परिचय:

Next.js 13.3 एक नया गतिशील सम्मेलन लाता है, जो अधिक उन्नत रूटिंग मामलों के कार्यान्वयन को सक्षम बनाता है। जैसा कि दस्तावेज़ में कहा गया है,

"समानांतर रूट आपको एक ही दृश्य में एक से अधिक पृष्ठ दिखाने की अनुमति देते हैं, जैसे जटिल डैशबोर्ड या मॉडल के साथ। समानांतर रूट के साथ, आप एक ही दृश्य में एक या अधिक पृष्ठों को एक साथ प्रस्तुत कर सकते हैं जिन्हें स्वतंत्र रूप से नेविगेट किया जा सकता है।"

सरल शब्दों में, आपके ऐप के विभिन्न घटक या अनुभाग एक साथ लोड हो सकते हैं, जिससे तरलता और प्रतिक्रिया की भावना आती है, खासकर यदि डेटा लाने या रेंडरिंग के कारण कुछ घटकों को अधिक समय लगता है।

3.2 उपयोग के मामले: डैशबोर्ड, मॉडल, और बहुत कुछ:

आधुनिक वेब अनुप्रयोगों की संरचना अक्सर उन्नत लेआउट की मांग करती है जो कई दृश्यों को जोड़ती है या अंतर्निहित सामग्री को खोए बिना प्रासंगिक पॉप-अप की आवश्यकता होती है।

दस्तावेज़ीकरण से उदाहरण लें:

 dashboard |__ @user |____ page.js |__ @team |____ page.js |__layout.js |__ page.js

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

3.3 लाभ: एकाधिक पृष्ठ दृश्य, सशर्त प्रतिपादन, स्वतंत्र नेविगेशन:

समानांतर मार्गों के फायदे कई गुना हैं। जैसा कि हाइलाइट किया गया है, वे अनुमति देते हैं:

"एक ही दृश्य में एक या अधिक पृष्ठों का एक साथ प्रतिपादन जिसे स्वतंत्र रूप से नेविगेट किया जा सकता है"।

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

संक्षेप में, समानांतर मार्गों के आगमन के साथ, वेब डेवलपर्स अब आधुनिक वेब की उभरती जरूरतों के लिए जटिल, गतिशील और उपयोगकर्ता के अनुकूल वेब इंटरफेस बनाने के लिए बेहतर ढंग से सुसज्जित हैं।

4. समानांतर मार्ग कैसे काम करते हैं

पैरेलल रूट्स में गहराई से जाने से पता चलता है कि Next.js 13.3 को कितनी चतुराई से बनाया गया है। आइए चरण दर चरण विवरण जानें।

4.1 "स्लॉट" और @फ़ोल्डर कन्वेंशन का परिचय:

"स्लॉट्स" की अवधारणा समानांतर मार्गों के केंद्र में है। स्लॉट को निर्दिष्ट क्षेत्रों के रूप में सोचें जो आपकी वेबसाइट के विभिन्न पृष्ठों या भागों को प्रदर्शित कर सकते हैं।

@folder कन्वेंशन इन स्लॉट्स को सेट करने के लिए उपयोग की जाने वाली विधि है, जैसा कि दस्तावेज़ के नोट से पता चलता है:

"समानांतर रूट इन नामित 'स्लॉट' का उपयोग करते हैं, जिन्हें @folder विधि का उपयोग करके परिभाषित किया गया है।"

• कोड स्पष्टीकरण:

  
  

  • समानांतर मार्गों के लिए फ़ोल्डर संरचना: इस उदाहरण पर विचार करें:

     dashboard |__ @user │____ page.js |__ @team |____ page.js |__ layout.js |__ utilities.js |__ page.js

    यहां, '@user' और '@team' विभिन्न सामग्री के लिए कंटेनर के रूप में कार्य करते हैं, जिससे हमें अपनी वेबसाइट को अधिक लचीले ढंग से डिजाइन करने की अनुमति मिलती है।

    
    

  • लेआउट स्लॉट्स को प्रॉप्स के रूप में कैसे उपयोग करते हैं: दस्तावेज़ीकरण के आधार पर, समान रूट सेगमेंट के भीतर लेआउट इन स्लॉट्स को प्रॉप्स के रूप में उपयोग कर सकते हैं। यहाँ एक स्पष्ट उदाहरण है:

     export default async function Layout({ children, user, team }) { const userType = getCurrentUserType(); return ( <> {userType === 'user' ? user : team} {children} </> ); }

    
    

  • नोट: उपरोक्त कोड में, getCurrentUserType() फ़ंक्शन का उपयोग उपयोगकर्ता के प्रकार को निर्धारित करने के लिए किया जाता है, जो बदले में, यह तय करता है कि user या team स्लॉट प्रदर्शित है या नहीं।

    
    

• निहित बनाम स्पष्ट रूट स्लॉट: नेक्स्ट.जेएस रूटिंग के मजबूत बिंदुओं में से एक इसका लचीलापन है। जबकि हमारे उदाहरण में '@user' और '@team' स्पष्ट स्लॉट हैं जिन्हें हम परिभाषित करते हैं (सीधे @folder से जुड़े हुए हैं), एक अंतर्निहित या स्वचालित स्लॉट भी है।

  
  

• दस्तावेज़ीकरण बताता है कि

  " children इस प्रकार का स्वचालित स्लॉट है, और हमें इसे @folder के साथ संबद्ध करने की आवश्यकता नहीं है। इसलिए, dashboard/page.js dashboard/@children/page.js के समान ही कार्य करता है।"

पैरेलल रूट कैसे संचालित होते हैं, इसे पूरी तरह से समझकर, डेवलपर्स Next.js 13 की क्षमताओं को अनुकूलित कर सकते हैं, ऐसी वेबसाइटें तैयार कर सकते हैं जो अधिक सहज और अनुकूलनीय हों।

5. समानांतर मार्गों का उपयोग कैसे करें, इस पर चरण-दर-चरण मार्गदर्शिका

5.1 एक नया Next.js ऐप सेट करना

एक नया Next.js एप्लिकेशन बनाकर शुरुआत करें:

 npx create-next-app@latest parallel-routes

नव निर्मित ऐप की निर्देशिका पर नेविगेट करें:

 cd parallel-routes

विकास सर्वर प्रारंभ करें:

 yarn dev

5.2 ऐप की संरचना करना

प्रोजेक्ट निर्देशिका में, निम्नलिखित फ़ोल्डर और फ़ाइलें बनाएं:

 app |__ @folder1 |____ page.js |__ @folder2 |____ page.js |__ page.js |__ layout.js

5.3 कंप्स बनाना और डेटा लोडिंग का अनुकरण करना

app/@folder1/page.js में, हम उस दृश्य अनुक्रम को समझने के लिए लोडिंग समय दिखाने और अनुकरण करने के लिए घटक बनाएंगे जिसमें घटक लोड होते हैं:

 export default async function Page() { // simulate loading time for 6 seconds await new Promise(resolve => setTimeout(resolve, 6000)); return <h4>FOLDER 1 COMPONENT LOADED</h4> }

इसी तरह, app/@folder2/page.js में:

 export default async function Page() { // simulate loading time for 8 seconds await new Promise(resolve => setTimeout(resolve, 8000)); return <h4>FOLDER 2 COMPONENT LOADED TWO SECONDS LATER</h4> }

ये सिम्युलेटेड लोडिंग समय आपको समानांतर मार्गों की क्षमता की दृष्टि से सराहना करने की अनुमति देता है।

5.4 लेआउट कोड अपडेट करें

app/layout.js में, दो फ़ोल्डरों को समायोजित करने के लिए लेआउट कोड समायोजित करें:

पहले:

 // ... (existing imports) export default function RootLayout({ children }) { return ( <html lang="en"> <body className={inter.className}>{children}</body> </html> ) }

बाद में:

 // ... (existing imports) export default function RootLayout({ children, folder1, folder2 }) { return ( <html lang="en"> <body className={inter.className}> <div> {folder1} </div> <div> {folder2} </div> {children} </body> </html> ); }

बेहतर पठनीयता के लिए बेझिझक लेआउट को सर्वोत्तम तरीके से स्टाइल करें

5.5 लोडिंग स्थिति जोड़ें

Next.Js दस्तावेज़ में कहा गया है कि:

विशेष फ़ाइल loading.js आपको रिएक्ट सस्पेंस के साथ सार्थक लोडिंग यूआई बनाने में मदद करती है। इस कन्वेंशन के साथ, आप रूट सेगमेंट की सामग्री लोड होने के दौरान सर्वर से तत्काल लोडिंग स्थिति दिखा सकते हैं। एक बार रेंडरिंग पूरी हो जाने पर नई सामग्री स्वचालित रूप से स्वैप हो जाती है।

प्रत्येक घटक (फ़ोल्डर1 और फ़ोल्डर2) के लिए, हम एक लोडिंग स्थिति बनाएंगे। आपकी फ़ोल्डर संरचना इस प्रकार होनी चाहिए:

 app |__ @folder1 |____ page.js |____ loading.js |__ @folder2 |____ page.js |____ loading.js |__ page.js |__ layout.js

ऐप/@folder1/loading.js

 export default function Loading() { return <p>LOADING FOLDER 1...</p> }

ऐप/@folder2/loading.js

 export default function Loading() { return <p>LOADING FOLDER 2...</p> }

5.6. पृष्ठ को संशोधित करें

app/page.js की सामग्री को समायोजित करें।

यह संशोधन सुनिश्चित करता है कि मुख्य पृष्ठ कुछ भी न दिखाए, जिससे समानांतर मार्ग चमकें:

 import Image from 'next/image' import styles from './page.module.css' export default function Home() { // anything you add here will be rendered as a children of RootLayout return null }

अस्वीकरण

समानांतर मार्गों के साथ अभ्यास करते समय, मुझे पता चला कि हॉट रीलोडिंग ने अपेक्षा के अनुरूप मार्गों को प्रदर्शित नहीं किया। मैंने समस्या की जाँच नहीं की है, इसलिए मैं आपको ठीक-ठीक नहीं बता सकता कि समस्या क्या है। यदि आप इसका सामना करते हैं, तो परिवर्तनों को प्रतिबिंबित करने के लिए बस विकास सर्वर को पुनरारंभ करें।

निष्कर्ष

Next.js 13.3 में पेश किए गए समानांतर मार्गों ने वेब विकास के क्षेत्र में एक महत्वपूर्ण प्रगति की है।

अपनी स्थापना से पहले, डेवलपर्स को एक वेबसाइट के कई खंडों को एक साथ प्रदर्शित करने में चुनौतियों का सामना करना पड़ता था, पारंपरिक रूटिंग अधिक रैखिक अनुभव प्रदान करती थी।

समानांतर मार्गों के साथ, Next.js गतिशील वेब डिज़ाइन के लिए एक अभिनव दृष्टिकोण प्रदान करता है, जो एक ही दृश्य में कई पृष्ठों को एक साथ प्रस्तुत करने की अनुमति देता है।

यह शक्तिशाली सुविधा न केवल उन्नत उपयोगकर्ता अनुभव प्रदान करती है बल्कि समकालीन वेब एप्लिकेशन डिज़ाइन की सीमाओं को आगे बढ़ाते हुए जटिल लेआउट और सशर्त रेंडरिंग की सुविधा भी प्रदान करती है।

ऊपर दिए गए विस्तृत गाइड का पालन करके, डेवलपर्स "स्लॉट" और '@फ़ोल्डर' कन्वेंशन जैसी मुख्य अवधारणाओं को समझने से लेकर नेक्स्ट.जेएस फ्रेमवर्क का उपयोग करके व्यावहारिक कार्यान्वयन तक, समानांतर मार्गों के कामकाज में गहराई से उतर सकते हैं।

हालाँकि कुछ बाधाएँ हो सकती हैं, जैसे कि विख्यात हॉट रीलोडिंग समस्या, समानांतर मार्गों द्वारा वेब अनुप्रयोगों में जोड़ा गया लचीलापन और गतिशीलता सीखने की अवस्था को सार्थक बनाती है।

जैसे-जैसे डिजिटल परिदृश्य विकसित हो रहा है, ऐसे उपकरण और सुविधाएँ निस्संदेह वेब विकास के भविष्य को आकार देने में महत्वपूर्ण भूमिका निभाएंगी।

एक बार फिर, आपके धैर्य और समर्पण के लिए धन्यवाद।

प्रतिक्रिया या प्रश्न मिले? साझा कर सकते हो। प्रत्येक आवाज मूल्य जोड़ती है।

मेरे साथ यहां जुड़ें:

dev.to समुदाय @leandro_nnz हैकरनून.कॉम समुदाय @leandronnz hashnode.com लीनड्रोन्ज़ twitter.com @digpollution

अगली बार तक, खुश कोडिंग!

संदर्भ

आप इस रेपो में पूरा कोड यहां पा सकते हैं।

आधिकारिक Next.js दस्तावेज़ीकरण यहाँ ।

इस लेख को बनाने के लिए, मैंने StackEdit का उपयोग किया।

अनस्प्लैश पर मार्कस स्पिस्के द्वारा फोटो