आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं। और पढ़ें।

Next.js 13 ने ऐप डायरेक्टरी का उपयोग करके एक नया रूटिंग सिस्टम पेश किया। Next.js 12 पहले से ही फ़ाइल-आधारित मार्गों के माध्यम से मार्गों को संभालने का एक आसान तरीका प्रदान करता है। पेज फोल्डर में एक कंपोनेंट जोड़ने से यह स्वचालित रूप से एक रूट बन जाएगा। इस नए संस्करण में, फ़ाइल-सिस्टम-आधारित राउटर लेआउट, टेम्प्लेट नेस्टेड रूटिंग, एक लोडिंग यूआई, त्रुटि से निपटने और सर्वर घटकों और स्ट्रीमिंग के लिए समर्थन के लिए एक अंतर्निहित सेटअप के साथ आता है।

यह लेख इन नई सुविधाओं के बारे में बताता है और बताता है कि ये क्यों महत्वपूर्ण हैं।

Next.js 13 के साथ आरंभ करना

टर्मिनल में निम्न आदेश चलाकर अपना अगला.js 13 प्रोजेक्ट बनाएं।

npx बनाएं-अगला-app@latest next13 --प्रायोगिक-ऐप

इसे नई ऐप निर्देशिका के साथ अगला 13 नामक एक नया फ़ोल्डर बनाना चाहिए।

नई ऐप निर्देशिका को समझना

Next.js 12 ने इस्तेमाल किया पृष्ठों रूटिंग के लिए निर्देशिका, लेकिन इसे इसके साथ बदल दिया गया है

instagram viewer
अनुप्रयोग/ निर्देशिका Next.js 13 में। पेज/ वृद्धिशील गोद लेने की अनुमति देने के लिए निर्देशिका अभी भी अगले 13 में काम करती है। आपको केवल यह सुनिश्चित करने की आवश्यकता है कि आप एक ही मार्ग के लिए दो निर्देशिकाओं में फ़ाइलें न बनाएँ क्योंकि आपको एक त्रुटि मिलेगी।

ऐप निर्देशिका की वर्तमान संरचना यहां दी गई है।

ऐप निर्देशिका में, आप मार्गों को परिभाषित करने के लिए फ़ोल्डर्स का उपयोग करते हैं, और इन फ़ोल्डर्स के अंदर की फ़ाइलें यूआई को परिभाषित करने के लिए उपयोग की जाती हैं। विशेष फाइलें भी हैं जैसे:

  • पेज.टीएसएक्स - फ़ाइल किसी विशेष मार्ग के लिए UI बनाने के लिए उपयोग की जाती है।
  • लेआउट.टीएक्स - इसमें मार्ग की लेआउट परिभाषा शामिल है और इसे कई पृष्ठों पर साझा किया जा सकता है। वे नेविगेशन मेनू और साइडबार के लिए एकदम सही हैं। नेविगेशन पर, लेआउट स्थिति को संरक्षित करते हैं और पुनः प्रस्तुत नहीं करते हैं। इसका अर्थ है कि जब आप लेआउट साझा करने वाले पृष्ठों के बीच नेविगेट करते हैं, तो स्थिति वही रहती है। ध्यान देने वाली एक बात यह है कि एक सर्वोच्च लेआउट (रूट लेआउट) होना चाहिए जिसमें संपूर्ण एप्लिकेशन में साझा किए गए सभी HTML और बॉडी टैग शामिल हों।
  • Template.tsx - टेम्प्लेट लेआउट की तरह होते हैं, हालांकि वे राज्य को संरक्षित नहीं करते हैं और हर बार पृष्ठ बनाने के लिए उपयोग किए जाने पर उन्हें फिर से प्रस्तुत किया जाता है। टेम्प्लेट उन स्थितियों के लिए एकदम सही हैं, जहां आपको हर बार घटक को माउंट करने के लिए कुछ कोड की आवश्यकता होती है, उदाहरण के लिए, एनिमेशन दर्ज करें और बाहर निकलें।
  • error.tsx - इस फ़ाइल का उपयोग एप्लिकेशन में त्रुटियों को संभालने के लिए किया जाता है। यह रिएक्ट त्रुटि सीमा वर्ग के साथ एक मार्ग को लपेटता है जैसे कि जब उस मार्ग या उसके बच्चों में कोई त्रुटि होती है तो वह उपयोगकर्ता के अनुकूल त्रुटि पृष्ठ को प्रस्तुत करके उससे पुनर्प्राप्त करने का प्रयास करता है।
  • Loading.tsx - लोडिंग यूआई तुरंत सर्वर से लोड हो जाता है क्योंकि रूट यूआई पृष्ठभूमि में लोड होता है। लोडिंग यूआई एक स्पिनर या कंकाल स्क्रीन हो सकता है। रूट सामग्री लोड होने के बाद, यह लोडिंग UI को बदल देता है।
  • नहीं मिला.tsx - जब नेक्स्ट.जेएस का सामना होता है तो नॉट-फाउंड फाइल रेंडर हो जाती है उस पृष्ठ के लिए 404 त्रुटि. Next.js 12 में, आपको मैन्युअल रूप से एक 404 पेज बनाना और सेट अप करना होगा।
  • सिर .tsx - यह फ़ाइल उस रूट सेगमेंट के लिए हेड टैग निर्दिष्ट करती है जिसमें इसे परिभाषित किया गया है।

Next.js 13 में रूट कैसे बनाएं

जैसा कि पहले उल्लेख किया गया है कि फ़ोल्डर्स का उपयोग करके रूट बनाए जाते हैं अनुप्रयोग/ निर्देशिका। इस फोल्डर के अंदर आपको एक फाइल बनानी होगी जिसका नाम है पेज.टीएसएक्स जो उस विशिष्ट मार्ग के UI को परिभाषित करता है।

उदाहरण के लिए, पथ के साथ मार्ग बनाने के लिए /products, आपको एक बनाना होगा ऐप/उत्पाद/पेज.टीएसएक्स फ़ाइल।

नेस्टेड मार्गों के लिए /products/sale, फ़ोल्डर्स को एक दूसरे के अंदर नेस्ट करें जैसे कि फ़ोल्डर संरचना दिखती है ऐप/उत्पाद/बिक्री/पेज.टीएसएक्स.

अन्य दिलचस्प सुविधाओं को रूट करने के एक नए तरीके के अलावा, ऐप निर्देशिका सर्वर घटकों और स्ट्रीमिंग का समर्थन करती है।

ऐप निर्देशिका में सर्वर घटकों का उपयोग करना

ऐप निर्देशिका डिफ़ॉल्ट रूप से सर्वर घटकों का उपयोग करती है। यह दृष्टिकोण ब्राउज़र को भेजे जाने वाले जावास्क्रिप्ट की मात्रा को कम कर देता है क्योंकि घटक सर्वर पर प्रस्तुत किया जाता है। इससे प्रदर्शन में सुधार होता है।

पर यह लेख देखें Next.js में अलग-अलग रेंडरिंग के तरीके अधिक गहन व्याख्या के लिए।

एक सर्वर घटक का मतलब है कि आप पर्यावरण के रहस्यों को बिना ग्राहक पक्ष के उजागर किए सुरक्षित रूप से एक्सेस कर सकते हैं। उदाहरण के लिए, आप उपयोग कर सकते हैं प्रक्रिया.env.

आप बैकएंड से सीधे इंटरैक्ट भी कर सकते हैं। प्रयोग करने की कोई आवश्यकता नहीं है getServerSideProps या getStaticProps जैसा कि आप डेटा लाने के लिए सर्वर घटक में async/प्रतीक्षा का उपयोग कर सकते हैं।

इस async फ़ंक्शन पर विचार करें जो किसी API से डेटा प्राप्त करता है।

asyncसमारोहडेटा प्राप्त करें() {
कोशिश{
कॉन्स्ट रेस = इंतजार लाना(' https://api.example.com/...');
वापस करना रेस.जेसन ();
 } पकड़ना(गलती) {
फेंकनानयागलती('डेटा नहीं लाया जा सका')
 }
}

आप इसे सीधे पृष्ठ पर निम्नानुसार कॉल कर सकते हैं:

निर्यातगलती करनाasyncसमारोहपृष्ठ() {
कॉन्स्ट डेटा = इंतजार डेटा प्राप्त करें();
वापस करना<डिव>डिव>;
}

गैर-संवादात्मक सामग्री को प्रस्तुत करने के लिए सर्वर घटक बहुत अच्छे हैं। अगर आप की जरूरत है रिएक्ट हुक का उपयोग करें, ईवेंट श्रोताओं, या ब्राउज़र-केवल एपीआई, किसी भी आयात से पहले घटक के शीर्ष पर "क्लाइंट का उपयोग करें" निर्देश जोड़कर क्लाइंट घटक का उपयोग करें।

ऐप निर्देशिका में क्रमिक रूप से स्ट्रीमिंग घटक

स्ट्रीमिंग का तात्पर्य क्लाइंट को UI के कुछ हिस्सों को उत्तरोत्तर तब तक भेजने से है जब तक कि सभी घटक प्रदान नहीं किए जाते। यह उपयोगकर्ता को सामग्री का हिस्सा देखने की अनुमति देता है जबकि बाकी को प्रस्तुत किया जा रहा है। उपयोगकर्ताओं को एक बेहतर अनुभव देने के लिए, एक लोडिंग घटक को एक स्पिनर की तरह प्रस्तुत करें जब तक कि सर्वर सामग्री का प्रतिपादन पूरा नहीं कर लेता। आप इसका उपयोग दो तरह से करते हैं:

  • बनाना एक लोड हो रहा है फ़ाइल जो पूरे मार्ग खंड के लिए प्रदान की जाएगी। 
निर्यातगलती करनासमारोहलोड हो रहा है() {
वापस करना<पी>लोड हो रहा है...पी>
}
  • रिएक्ट सस्पेंस सीमा के साथ अलग-अलग घटकों को लपेटना और फ़ॉलबैक UI निर्दिष्ट करना। 
आयात { कौतुहल } से"प्रतिक्रिया";
आयात {उत्पाद} से"।/अवयव";
निर्यातगलती करनासमारोहबिक्री() {
वापस करना (
<अनुभाग>
उत्पाद...
}>
<उत्पादों />
कौतुहल>
अनुभाग>
 );
}

उत्पाद घटक प्रस्तुत करने से पहले, उपयोगकर्ता "उत्पाद ..." देखेंगे। यूजर एक्सपीरियंस के लिहाज से यह ब्लैंक स्क्रीन से बेहतर है।

Next.js 13 में अपग्रेड करना

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

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

हालाँकि, आप अभी भी Next.js 13 में अपग्रेड कर सकते हैं क्योंकि पेज डायरेक्टरी अभी भी काम करती है फिर ऐप डायरेक्टरी का उपयोग अपनी गति से करना शुरू करें।