Importera komponenter i NextJS

Man kan importera inte bara filer med data, utan även komponenter på samma sätt som vi är vana vid när vi arbetar i vanlig React. Låt oss titta på hur det fungerar.

Låt oss först införa några konventioner. Som du redan vet placeras sidorna på webbplatsen i mappen src/app. Låt oss placera underordnade komponenter i mappen src/comp.

Låt oss nu ansluta en underordnad komponent till någon sida. Låt oss säga att vi har följande sida:

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

Låt oss säga att vi har följande underordnade komponent:

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

Importera vår underordnade komponent till vår sida:

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

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

Låt oss infoga den importerade komponenten. För att göra detta använder vi en tagg med namnet på komponentvariabeln:

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

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

Skapa flera underordnade komponenter. Importera dem till dina sidor.