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ë:

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

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

export default function Child() {
	return <p>
		child
	</p>;
}

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

import 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:

import Child from '@/comp/child/child.jsx';

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

Krijoni disa komponentë të fëmijëve. Importojini ato në faqet tuaja.