Componenten importeren in NextJS

Je kunt niet alleen bestanden met gegevens importeren, maar ook componenten, net zoals we gewend zijn te werken in gewone React. Laten we eens kijken hoe dit werkt.

Laten we eerst enkele afspraken maken. Zoals je al weet, worden in de map src/app de pagina's van de website geplaatst. Laten we onderliggende componenten plaatsen in de map src/comp.

Laten we nu een onderliggende component verbinden met een pagina. Stel dat we de volgende pagina hebben:

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

Stel dat we de volgende onderliggende component hebben:

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

Laten we onze onderliggende component importeren naar onze pagina:

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

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

Laten we de geïmporteerde component invoegen. Hiervoor gebruiken we de tag met de naam van de componentvariabele:

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

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

Maak meerdere onderliggende componenten. Importeer ze naar je pagina's.