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 />
	</>;
}

Бир нече төмөнкү компоненттерди түзгүлө. Аларды өз баракчаларыңызга импорттогон.