Komponenttien tuonti NextJS:ssä

Voit tuoda paitsi tiedostoja tiedoilla, myös komponentteja samalla tavalla kuin olemme tottuneet toimimaan tavallisessa Reactissa. Katsotaan, kuinka se toimii.

Aloitetaan tekemällä joitakin sopimuksia. Kuten jo tiedät, kansiossa src/app sijaitsevat sivuston sivut. Laitetaan alikomponentit kansioon src/comp.

Liitetään nyt alikomponentti jollekkin sivulle. Oletetaan, että meillä on seuraava sivu:

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

Oletetaan, että meillä on seuraava alikomponentti:

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

Tuodaan alikomponenttimme sivullemme:

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

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

Suoritetaan tuodun komponentin lisäys. Käytä tähän tunnistetta, jonka nimi on komponentin muuttujan nimi:

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

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

Luo useita alikomponentteja. Tuo ne sivuillesi.