Importimi i Komponentëve në NextJS

Nuk mund të importohen vetëm skedarët me të dhëna, por edhe komponentët ngjashëm me atë sic jemi mësuar të veprojmë kur punojmë në React-in e zakonshëm. Le të shohim se si funksionon kjo.

Për fillim, le të prezantojmë disa marrëveshje. Siç e dini tashmë, në dosjen src/app vendosen faqet e sajtit. Le të vendosim komponentët e fëmijëve në dosjen src/comp.

Tani le të lidhim një komponent fëmijë me ndonjë faqe. Le të themi se kemi një faqe të tillë:

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

Le të themi se kemi komponentin e fëmijës vijues:

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

Le të importojmë komponentin tonë të fëmijës në faqen tonë:

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

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

Le të kryejmë futjen e komponentit të importuar. Për këtë përdorni etiketën me emrin e ndryshores së komponentit:

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

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