Komponentų importavimas NextJS

Galima importuoti ne tik duomenų failus, bet ir komponentus, panašiai kaip mes įpratę veikti dirbdami su įprastu React. Pažiūrėkime, kaip tai veikia.

Pirmiausia pristatykime keletą susitarimų. Kaip jau žinote, aplanke src/app yra talpinami svetainės puslapiai. Dėkime antrinius komponentus aplanke src/comp.

Dabar prijunkime antrinį komponentą prie kokio nors puslapio. Tarkime, kad turime tokį puslapį:

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

Tarkime, kad turime šį antrinį komponentą:

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

Importuokime mūsų antrinį komponentą į mūsų puslapį:

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

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

Atlikime importuoto komponento įterpimą. Tam naudokime žymę su kintamojo, kuriame yra komponentas, pavadinimu:

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

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

Sukurkite keletą antrinių komponentų. Importuokite juos į savo puslapius.