Компоненттерді 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 />
	</>;
}

Бірнеше бала компонент жасаңыз. Оларды өз беттеріңізге импорттаңыз.