Komponensek importálása NextJS-ben

Nem csak adatfájlokat importálhatunk, hanem komponenseket is, hasonlóan ahhoz, amit a szokásos React használata során szoktunk csinálni. Nézzük meg, hogyan működik ez.

Először is határozzunk meg néhány egyezséget. Amint már tudod, a src/app mappában találhatók a webhely oldalai. Helyezzük el a gyermek komponenseket a src/comp mappában.

Most kapcsoljunk be egy gyermek komponenst valamilyen oldalhoz. Tegyük fel, hogy van egy ilyen oldalunk:

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

Tegyük fel, hogy a következő gyermek komponensünk van:

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

Importáljuk a gyermek komponensünket az oldalunkra:

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

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

Végezzük el az importált komponens beillesztését. Ehhez használjuk a komponens változónevével ellátott tag-et:

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

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

Hozzon létre néhány gyermek komponenst. Importálja őket az Ön oldalaira.