NextJS में वेबसाइट लेआउट में कंटेंट

आइए वेबसाइट के मुख्य लेआउट पर विचार करें, जिसे हमने पिछले पाठ में समझना शुरू किया था:

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

जैसा कि आप देख सकते हैं, वेबसाइट लेआउट एक फ़ंक्शन वाला कंपोनेंट है। इसके अलावा फ़ंक्शन के पैरामीटर में एक ऑब्जेक्ट पास किया जाता है, जिसमें से हम children की संबंधित वेरिएबल में निकालते हैं। इस वेरिएबल में page.jsx फ़ाइल की सामग्री संग्रहीत होती है, जो अनुरोधित URL से मेल खाती है।

यानी layout.jsx फ़ाइल में वेबसाइट का लेआउट संग्रहीत होता है, और children वेरिएबल की मदद से हम वेबसाइट के लेआउट में उस स्थान को निर्दिष्ट करते हैं, जिसमें पेज का कंटेंट डाला जाना चाहिए।

उदाहरण के लिए आइए पेज के कंटेंट को किसी टैग में फॉर्मेट करें:

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