Импорт на компоненти во 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 />
	</>;
}

Создадете неколку дечински компоненти. Импортирајте ги на вашите страници.