Next.js 15 फुलस्टैक (App Router + Server Actions) · पाठ

पेज और लेआउट का अवलोकन

पेज और लेआउट के अंतर तथा आपके Next.js अनुप्रयोग की UI संरचना बनाने के लिए उनके संयोजन का अन्वेषण करें

पाठ 3, कुल 4 में से12 चरण

पेज और लेआउट का अवलोकन, CoddyKit पर Next.js 15 फुलस्टैक (App Router + Server Actions) का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Next.js 15 फुलस्टैक (App Router + Server Actions) सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

पेज और लेआउट में आपका स्वागत है

Next.js का UI दो विचारों पर आधारित है: पेज और लेआउट। इस पाठ में बताया गया है कि दोनों क्या हैं और आपका इंटरफ़ेस बनाने के लिए वे कैसे मिलकर काम करते हैं।

पेज क्या है

पेज एक React कॉम्पोनेंट है, जो किसी एक रूट का UI रेंडर करता है। इसे page.js फ़ाइल से डिफ़ॉल्ट रूप से एक्सपोर्ट करें और उस रूट को अपना अलग दृश्य मिल जाएगा।

एक सरल पेज बनाना

यहाँ एक बुनियादी page.js है, जो होम रूट / को रेंडर करता है। पेज बस डिफ़ॉल्ट रूप से एक्सपोर्ट किया गया कॉम्पोनेंट होता है — इससे अधिक कुछ नहीं।

// app/page.js

export default function HomePage() {
  return (
    <h1>Welcome to My App!</h1>
  );
}

लेआउट क्या है

लेआउट पेजों के बीच साझा किया जाने वाला UI है — एक ऐसा आवरण, जो एकसमान संरचना देता है। इसे layout.js से एक्सपोर्ट करें; यह नेस्टेड सामग्री के लिए children प्रॉप लेता है।

मुख्य लेआउट

हर App Router ऐप में app/layout.js पर एक मुख्य लेआउट होना आवश्यक है। यह पूरे ऐप को घेरता है, जिसमें html और body टैग भी शामिल हैं — वैश्विक शैलियों और मेटाडेटा के लिए यही उपयुक्त स्थान है।

// app/layout.js

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

नेस्टेड लेआउट

किसी भी फ़ोल्डर के अंदर layout.js जोड़कर नेस्टेड लेआउट बनाएँ। app/dashboard/layout.js, dashboard के अंतर्गत आने वाले हर पेज को घेरता है — यानी हर सेक्शन के लिए अलग साझा UI।

वे एक साथ कैसे काम करते हैं

Next.js लेआउट को स्वचालित रूप से नेस्ट करता है: कोई पेज अपने पैरेंट लेआउट के children के अंदर रेंडर होता है, वह उसके पैरेंट के अंदर और इसी तरह यह क्रम मुख्य लेआउट तक जाता है।

उदाहरण: ब्लॉग सेक्शन

एक ब्लॉग की कल्पना करें: blog/layout.js साझा नेविगेशन देता है, blog/page.js इंडेक्स है और blog/first-post/page.js एक पोस्ट है — हर स्तर मुख्य लेआउट की ओर नेस्ट होता जाता है।

कोड: ब्लॉग लेआउट का उदाहरण

यह blog/layout.js हर /blog पेज को हेडर, नेविगेशन और फ़ुटर से घेरता है — यह साझा ढाँचा पूरे सेक्शन में एकसमान बना रहता है।

// app/blog/layout.js

export default function BlogLayout({ children }) {
  return (
    <div>
      <header><h1>My Awesome Blog</h1></header>
      <nav>
        <a href="/blog">Home</a> | <a href="/blog/archive">Archive</a>
      </nav>
      <main>{children}</main>
      <footer><p>&copy; 2023 CoddyKit Blog</p></footer>
    </div>
  );
}

कोड: ब्लॉग पेज का उदाहरण

और यह रहा blog/page.js। इसकी सामग्री BlogLayout के अंदर जहाँ {children} स्थित है, ठीक वहीं रेंडर होती है — यानी पेज लेआउट में अपनी जगह लेता है।

// app/blog/page.js

export default function BlogHomePage() {
  return (
    <section>
      <h2>Welcome to the Blog Homepage!</h2>
      <p>Discover our latest articles and insights.</p>
    </section>
  );
}

पेज बनाम लेआउट प्रश्नोत्तरी

आइए Next.js के पेज और लेआउट की आपकी समझ की जाँच करें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: पेज और लेआउट

पुनरावलोकन: पेज (page.js) किसी रूट का विशिष्ट UI रेंडर करते हैं, लेआउट (layout.js) अलग-अलग रूटों के बीच UI साझा करते हैं और Next.js उन्हें children के माध्यम से नेस्ट करता है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ TypeScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 22
पाठ: 88

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “पेज और लेआउट का अवलोकन” पाठ निःशुल्क है?

हाँ—“पेज और लेआउट का अवलोकन” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“पेज और लेआउट का अवलोकन” में मैं क्या सीखूँगा?

पेज और लेआउट के अंतर तथा आपके Next.js अनुप्रयोग की UI संरचना बनाने के लिए उनके संयोजन का अन्वेषण करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Next.js 15 फुलस्टैक (App Router + Server Actions) का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Next.js 15 फुलस्टैक (App Router + Server Actions) शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Next.js 15 फुलस्टैक (App Router + Server Actions) शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“पेज और लेआउट का अवलोकन” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Next.js 15 फुलस्टैक (App Router + Server Actions) पर वापस जाएँ