NextJS में नेस्टेड लेआउट

जैसा कि आप जानते हैं, /app फोल्डर में /layout.jsx फाइल में साइट का मुख्य लेआउट स्थित होता है।

इच्छा होने पर, हालांकि, नेस्टेड फोल्डरों में अपने स्वयं के लेआउट बनाए जा सकते हैं। इस स्थिति में पेज कॉन्टेंट पहले नेस्टेड लेआउट में डाला जाएगा, और फिर परिणामी रिजल्ट मुख्य लेआउट में डाला जाएगा।

आइए व्यवहार में कोशिश करते हैं। मान लीजिए कि हमारा मुख्य लेआउट निम्नलिखित रूप का है:

app/layout.jsxexport default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        <header>
          header
        </header>
        <main>
          {children}
        </main>
        <footer>
          footer
        </footer>
      </body>
    </html>
  );
}

आइए /users फोल्डर के सभी कॉन्टेंट के लिए एक और, नेस्टेड लेआउट बनाते हैं:

app/users/layout.jsxexport default function UsersLayout({children}) {
  return (
    <div className="info">
      message for all users
    </div>
    <div className="content">
      {children}
    </div>
  );
}

जैसा कि आप देख रहे हैं, इस लेआउट में हम पेज के मुख्य टैग निर्दिष्ट नहीं करते, क्योंकि वे पहले से ही हमारे साइट के मुख्य लेआउट में मौजूद हैं।

आइए यूजर दिखाने के लिए कॉन्टेंट वाली एक फाइल भी बनाते हैं:

src/app/users/show/page.jsxexport default function User() {
  return <>
    <h1>User</h1>
    <p>
      user description
    </p>
  </>;
}

इन मैनिपुलेशन के बाद हमारी फाइल स्ट्रक्चर इस तरह दिखेगी:

• /app/layout.jsx/users/layout.jsx/show/page.jsx

अब, यदि संबंधित URL पर जाया जाए, NextJS सभी को एक साथ जोड़ देगा और ब्राउज़र में हमें निम्नलिखित अंतिम HTML कोड मिलेगा:

html<html lang="en">
  <body>
    <header>
      header
    </header>
    <main>
      <div class="info">
        message for all users
      </div>
      
      <h1>User</h1>
      <p>
        user description
      </p>
    </main>
    <footer>
      footer
    </footer>
  </body>
</html>