Importování komponentů v NextJS

Importovat lze nejen soubory s daty, ale i komponenty podobně jako jsme zvyklí při práci v obyčejném Reactu. Podívejme se, jak to funguje.

Pro začátek zavedeme některé konvence. Jak již víte, ve složce src/app jsou umístěny stránky webu. Umístěme dceřiné komponenty do složky src/comp.

Nyní připojme dceřinou komponentu k nějaké stránce. Předpokládejme, že máme takovou stránku:

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

Předpokládejme, že máme následující dceřinou komponentu:

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

Importujme naši dceřinou komponentu na naši stránku:

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

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

Proveďme vložení importované komponenty. K tomu použijeme tag s názvem proměnné komponenty:

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

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

Vytvořte několik dceřiných komponent. Importujte je na vaše stránky.