Import af komponenter i NextJS

Man kan importere ikke kun filer med data, men også komponenter på samme måde, som vi er vant til, når vi arbejder i almindelig React. Lad os se på, hvordan det fungerer.

Lad os starte med at indføre nogle konventioner. Som du allerede ved, placeres siderne på hjemmesiden i mappen src/app. Lad os placere underordnede komponenter i mappen src/comp.

Lad os nu tilknytte en underordnet komponent til en side. Lad os sige, at vi har følgende side:

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

Lad os sige, at vi har følgende underordnede komponent:

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

Lad os importere vores underordnede komponent til vores side:

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

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

Lad os udføre indsættelsen af den importerede komponent. For at gøre dette bruger vi et tag med navnet på komponentvariablen:

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

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

Opret flere underordnede komponenter. Importer dem til dine sider.