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 />
  </>;
}