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

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

अगले में एक कस्टम लेआउट घटक बनाना। जे एस

नाम के फोल्डर में अवयव अपने Next.js प्रोजेक्ट में, बनाएँ लेआउट.जेएसएक्स और लेआउट घटक बनाने के लिए निम्न कोड जोड़ें।

आयात सिर से'अगला/सिर'
आयात हैडर से'./Header.jsx'
आयात फ़ुटबाल से'./Footer.jsx'
कॉन्स्ट लेआउट = (बच्चे) => (



My App<<span>/title></span><br> <link rel="<span">"stylesheet" href=<span>"/static/css/style.css"</span> /><br> <<span>/Head></span><br> <header></header><br> {बच्चों<br> <footer></footer><br> <<span>/div></span><br>)<br><span>निर्यात</span> <span>डिफ़ॉल्ट</span> लेआउट<br> < p>यह घटक शीर्षलेख और पाद लेख घटकों को आयात करता है और <span>बच्चों को इस रूप में स्वीकार करता है सहारा</span>. यह <strong>चिल्ड्रन</strong> को हेडर और फुटर घटकों के बीच में प्रस्तुत करता है। जब आप इस लेआउट के साथ एक पृष्ठ लपेटते हैं, शीर्ष लेख और पादलेख ऊपर और नीचे प्रदर्शित होंगे।<div>
<a href="https://greatfon.com">instagram viewer</a>
</div>
<h2 id="using-the-layout-component"> का उपयोग करना लेआउट घटक </h2>
<p>लेआउट घटक का उपयोग करने के लिए, इसे पृष्ठ घटक में आयात करें और नीचे दिखाए अनुसार उपयोग करें।</p> <pre> <code><span>आयात करें</span> लेआउट <span>से</span> <span>'../components/Layout'</span><br><span>const</span> पेज = <span><span>()</span> =></span> (<br>  <br> <h1>होम<<span>/h1></span><br> <<span>/लेआउट></span><br>)<br><span>निर्यात</span> <span> डिफ़ॉल्ट</span> पृष्ठ<br>
</h1></code> </pre>
<p>यह लागू होगा इस पृष्ठ के लिए लेआउट। आप इस प्रक्रिया को उन सभी पृष्ठों पर दोहरा सकते हैं जिन्हें आप लेआउट लागू करना चाहते हैं।</p>
<p>एक बार में एप्लिकेशन में सभी पृष्ठों पर लेआउट का उपयोग करने के लिए, आयात करें लेआउट घटक को <strong>/page/_app.js</strong> फ़ाइल में डालें और इसे निम्नानुसार उपयोग करें।</p> <pre> <code><span>आयात करें</span> लेआउट <span>से <pre> <code><span>import</span> स्पैन> <span>"../components/layout"</span>;<br><span><span>function</span> <span>MyApp</span>(<span>{ Component, pageProps } स्पैन>) </span>{ <br> <span>वापसी</span> ( <br>  <br>  <br> <<span>/Layout> </span><br> ) ;<br>}</span></code> </pre>
<p>अब तक दिखाए गए उदाहरण Next.js 12 पेज फोल्डर का उपयोग करें। Next.js 13 में, आप ऐप फ़ोल्डर में लेआउट बनाते हैं (लेखन के अनुसार, यह बीटा में है)।</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> ऐप फोल्डर में एक कस्टम लेआउट बनाना </h2>
<p>Next.js 13 में <span>ऐप फोल्डर </span>आपको इसके आधार पर एक रूट लेआउट बनाना होगा। यह वह लेआउट है जिसे Next.js आपके ऐप्लिकेशन के सभी पेजों पर लागू करेगा।</p>
<p>प्रदर्शित करने के लिए, <strong>layout.jsx</strong> नाम की एक फ़ाइल बनाएं और निम्न कोड जोड़ें।</p>
<p> प> </p>
<pre> <code><span>निर्यात</span> <span>डिफ़ॉल्ट</span> <span><span>फ़ंक्शन</span> <span>RootLayout</span>(<span>{ चिल्ड्रन }</span> स्पैन>) </span>{<br> <span>रिटर्न</span> (<br> "en"</code></pre></span>><br> {बच्चों}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>रूट लेआउट घटक स्वीकार करता है और प्रस्तुत करता है <strong>बच्चे</strong>। रूट लेआउट के बारे में आपको कुछ चीज़ें नीचे जाननी चाहिए:</p>
<ul> <li> आपको इसे ऐप फ़ोल्डर में शामिल करना होगा। </li> <li> यह Next.js 12 के पेज फोल्डर में <strong>_app.js</strong> और <strong>_document.js</strong> की जगह लेता है। </li> <li> आपको HTML और बॉडी टैग को स्पष्ट रूप से शामिल करना होगा। </li> <li> यह डिफ़ॉल्ट रूप से एक सर्वर घटक है। </li> </ul>
<p>जैसा कि उल्लेख किया गया है, रूट लेआउट सभी पृष्ठों पर लागू होता है, तो आप कस्टम लेआउट कैसे बनाते हैं? विभिन्न मार्ग खंड?</p>
<p>अपने ऐप फ़ोल्डर में, आप प्रत्येक मार्ग के लिए फ़ोल्डर बनाकर एक मार्ग परिभाषित कर सकते हैं खंड। उदाहरण के लिए, <strong>लेख</strong> नामक फ़ोल्डर बनाने से <strong>ऐप्लिकेशन/लेख</strong> URL पथ पर मैप हो जाता है. आगे रूट सेगमेंट जोड़ने के लिए, मुख्य रूट फ़ोल्डर में एक सबफ़ोल्डर बनाएँ। उदाहरण के लिए, <strong>लेख</strong> फ़ोल्डर के अंदर <strong>रुझान</strong> नामक फ़ोल्डर जोड़ने से URL पथ मैप हो जाता है <strong>ऐप/आर्टिकल्स/ट्रेंडिंग</strong>।</p>
<p>जब आप किसी रूट फ़ोल्डर में <strong>layout.jsx</strong> घटक जोड़ते हैं, तो यह उसमें मौजूद सभी पेजों पर लागू होगा मार्ग खंड और उसके सबफ़ोल्डर। उदाहरण के लिए, <strong>लेख</strong> फ़ोल्डर में एक लेआउट घटक जोड़ना <strong>रुझान</strong> सबफ़ोल्डर सहित लेख मार्ग के सभी पृष्ठों पर लागू होगा. यदि आप <strong>रुझान</strong> फ़ोल्डर में एक लेआउट घटक भी जोड़ते हैं, तो लेख फ़ोल्डर में लेआउट इसके भीतर नेस्टेड हो जाएगा।</p>
<h2 id="advantages-of-using-layouts"> लेआउट का उपयोग करने के लाभ </h2>
<p>Next.js आपको ऐसे लेआउट घटक बनाने में सक्षम बनाता है जिनका आप विभिन्न क्षेत्रों में पुन: उपयोग कर सकते हैं पेज। यह आपको कई पेजों में कोड डुप्लिकेट किए बिना अपनी वेबसाइट पर एक समान नज़र रखने की अनुमति देता है। इसके अतिरिक्त, लेआउट परिवर्तनों को शीघ्रता से लागू करने में आपकी सहायता करते हैं क्योंकि आपको प्रत्येक पृष्ठ में परिवर्तन करने की आवश्यकता नहीं होती है।</p>