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

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

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

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

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

export default function Header() {
	return <>
		header
	</>;
}

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

import Header from '@/comp/header/header.jsx';

export default function RootLayout({children}) {
	
}

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

import 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>
	);
}

साइट के हेडर और फुटर के लिए अलग-अलग कंपोनेंट बनाएं।