კომპონენტების იმპორტი 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 />
  </>;
}