Importul componentelor în NextJS

Puteți importa nu numai fișiere cu date, ci și componente similar modului în care suntem obișnuiți să lucrăm în React obișnuit. Să vedem cum funcționează.

Pentru început, să stabilim câteva convenții. După cum știți deja, în folderul src/app sunt plasate paginile site-ului. Să plasăm componentele copil în folderul src/comp.

Acum să conectăm o componentă copil la o pagină. Să presupunem că avem următoarea pagină:

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

Să presupunem că avem următoarea componentă copil:

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

Să importăm componenta noastră copil în pagina noastră:

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

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

Să efectuăm inserarea componentei importate. Pentru aceasta, folosim tag-ul cu numele variabilei componentei:

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

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

Creați mai multe componente copil. Importați-le în paginile dvs.