Կոմպոնենտների ներմուծում NextJS-ում

Ներմուծել կարելի է ոչ միայն տվյալներ պարունակող ֆայլերը, այլև կոմպոնենտներ՝ նման այն բանի, ինչին մենք սովոր ենք սովորական React-ում աշխատելիս։ Եկեք տեսնենք, թե ինչպես է դա աշխատում։

Սկսելու համար եկեք ներմուծենք որոշակի համաձայնեցումներ։ Ինչպես արդեն գիտեք, src/app պանակում տեղադրվում են cայթի էջերը։ Եկեք ենթակոմպոնենտները տեղադրենք 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 />
  </>;
}