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:

src/app/test/page.jsxexport default function Test() {
  return <>
    <h1>Test</h1>
  </>;
}

Suppose we have the following child component:

src/comp/child/child.jsxexport default function Child() {
  return <p>
    child
  </p>;
}

Let's import our child component into our page:

src/app/test/page.jsximport 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:

src/app/test/page.jsximport Child from '@/comp/child/child.jsx';

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