NextJS में कंपोनेंट्स में वेबसाइट के भाग

पिछले पाठ में, हमने टेक्स्ट को सीधे लेआउट फ़ाइल में लिखा था:

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

हालाँकि, यह तब असुविधाजनक हो सकता है जब वेबसाइट के भागों में बहुत सारा कोड और टेक्स्ट हो। इसलिए आमतौर पर वेबसाइट के भागों को अलग फ़ाइलों वाले कंपोनेंट्स में बाहर निकाला जाता है।

आइए उदाहरण के लिए साइट के हेडर को एक अलग कंपोनेंट में बाहर निकालें। संबंधित फ़ाइल बनाएं:

comp/header/header.jsxexport default function Header() {
  return <>
    header
  </>;
}

अपने कंपोनेंट को लेआउट फ़ाइल में आयात करें:

app/layout.jsximport Header from '@/comp/header/header.jsx';

export default function RootLayout({children}) {
  
}

उसके नाम वाले टैग का उपयोग करके अपने कंपोनेंट का टेक्स्ट प्रदर्शित करें:

app/layout.jsximport Header from '@/comp/header/header.jsx';

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