NextJS da Komponentlarni Import Qilish

Faqat ma'lumotlar fayllarini emas, balki komponentlarni ham import qilish mumkin, xuddi oddiy React bilan ishlashda odatlaganimizdek. Keling, buning qanday ishlashini ko'rib chiqaylik.

Boshlash uchun ba'zi kelishuvlarni kiritamiz. Bilganingizdek, src/app papkasida sayt sahifalari joylashgan. Keling, quyi komponentlarni src/comp papkasida joylashtiramiz.

Keling, endi biror sahifaga quyi komponentni ulaymiz. Quyidagi sahifamiz bor deylik:

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

Quyidagi quyi komponentimiz bor deylik:

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

Endi quyi komponentimizni sahifamizga import qilaylik:

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

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

Import qilingan komponentni qo'shamiz. Buning uchun komponent o'zgaruvchisi nomi bilan tegdan foydalanamiz:

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

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