Importing Components in NextJS

You can import not only data files but also components, similar to how we are used to working in regular React. Let's see how it works.

First, let's introduce some conventions. As you already know, the src/app folder contains the site pages. Let's place child components in the src/comp folder.

Now let's connect a child component to a page. Suppose we have the following page:

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

Suppose we have the following child component:

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

Let's import our child component into our page:

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

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

Let's insert the imported component. To do this, use a tag with the name of the component variable:

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

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

Create several child components. Import them into your pages.