NextJS में कंपोनेंट्स आयात करना

न केवल डेटा फाइलों को आयात किया जा सकता है, बल्कि कंपोनेंट्स को भी आयात किया जा सकता है, ठीक वैसे ही जैसे हम सामान्य React में काम करते समय करते हैं। आइए देखें, यह कैसे काम करता है।

शुरुआत के लिए कुछ समझौते कर लेते हैं। जैसा कि आप पहले से ही जानते हैं, src/app फोल्डर में वेबसाइट के पेज रखे जाते हैं। आइए चाइल्ड कंपोनेंट्स को src/comp फोल्डर में रखें।

आइए अब किसी पेज में एक चाइल्ड कंपोनेंट को कनेक्ट करें। मान लीजिए हमारे पास ऐसा पेज है:

src/app/test/page.jsxexport default function Test() {
  return <>
    <h1>Test</h1>
  </>;
}

मान लीजिए हमारे पास निम्नलिखित चाइल्ड कंपोनेंट है:

src/comp/child/child.jsxexport default function Child() {
  return <p>
    child
  </p>;
}

अब हम अपने चाइल्ड कंपोनेंट को अपने पेज में आयात करते हैं:

src/app/test/page.jsximport Child from '@/comp/child/child.jsx';

export default function Test() {
  return <>
    <h1>Test</h1>
  </>;
}

आयात किए गए कंपोनेंट को इन्सर्ट करें। इसके लिए कंपोनेंट वेरिएबल के नाम वाले टैग का उपयोग करें:

src/app/test/page.jsximport Child from '@/comp/child/child.jsx';

export default function Test() {
  return <>
    <h1>Test</h1>
    <Child />
  </>;
}