Importere komponenter i NextJS

Du kan importere ikke bare filer med data, men også komponenter på samme måte som vi er vant til når vi jobber med vanlig React. La oss se på hvordan dette fungerer.

La oss først introdusere noen konvensjoner. Som du allerede vet, plasseres sidene på nettstedet i mappen src/app. La oss plassere underordnede komponenter i mappen src/comp.

La oss nå koble til en underordnet komponent til en side. La oss si at vi har følgende side:

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

La oss si at vi har følgende underordnede komponent:

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

La oss importere vår underordnede komponent til siden vår:

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

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

La oss utføre innsetting av den importerte komponenten. For å gjøre dette bruker vi en tagg med navnet på komponentvariabelen:

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

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

Opprett flere underordnede komponenter. Importer dem til sidene dine.