Импорт на компоненти в NextJS

Можете да импортирате не само файлове с данни, но и компоненти, подобно на това, както сме свикнали да работим в обикновен React. Нека да видим как работи това.

За начало ще въведем някои споразумения. Както вече знаете, в папката src/app се разполагат страниците на сайта. Нека разположим дъщерните компоненти в папка src/comp.

Нека сега свържем дъщерен компонент към някоя страница. Да кажем, че имаме следната страница:

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

Да кажем, че имаме следния дъщерен компонент:

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

Нека импортираме нашия дъщерен компонент в нашата страница:

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

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

Ще извършим вмъкване на импортирания компонент. За целта ще използваме таг с името на променливата на компонента:

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

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

Създайте няколко дъщерни компонента. Импортирайте ги във вашите страници.