Komponentide importimine NextJS-is

Importida saab mitte ainult andmefaile, vaid ka komponente sarnaselt sellega, kuidas me oleme harjunud tegutsema tavalise React-i puhul. Vaatame, kuidas see töötab.

Alustuseks võtame kasutusele mõned kokkulepped. Nagu te juba teate, asuvad kausta src/app veebilehe lehed. Paneme alamkomponendid kausta src/comp.

Ühendame nüüd mõne alamkomponendi mõne lehega. Olgem meil näiteks selline leht:

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

Olgem meil järgmine alamkomponent:

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

Importime oma alamkomponendi oma lehele:

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

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

Teeme imporditud komponendi sisestamise. Selleks kasutame komponendi muutuja nimega tegit:

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

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

Loo mitu alamkomponenti. Impordi need oma lehtedele.