Importowanie komponentów w NextJS

Importować można nie tylko pliki z danymi, ale także komponenty, podobnie jak to robimy przy pracy w zwykłym React. Spójrzmy, jak to działa.

Na początek wprowadźmy pewne konwencje. Jak już wiesz, w folderze src/app umieszczane są strony serwisu. Umieśćmy komponenty potomne w folderze src/comp.

Podłączmy teraz komponent potomny do jakiejś strony. Załóżmy, że mamy taką stronę:

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

Załóżmy, że mamy następujący komponent potomny:

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

Zaimportujmy nasz komponent potomny do naszej strony:

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

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

Wykonajmy wstawienie zaimportowanego komponentu. W tym celu użyjmy tagu z nazwą zmiennej komponentu:

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

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

Utwórz kilka komponentów potomnych. Zaimportuj je do swoich stron.