Importação de Componentes no NextJS

É possível importar não apenas arquivos de dados, mas também componentes, de forma semelhante ao que estamos acostumados a fazer ao trabalhar no React comum. Vamos ver como isso funciona.

Para começar, vamos estabelecer algumas convenções. Como você já sabe, na pasta src/app ficam as páginas do site. Vamos colocar os componentes filhos na pasta src/comp.

Agora vamos conectar um componente filho a alguma página. Suponha que temos a seguinte página:

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

Suponha que temos o seguinte componente filho:

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

Vamos importar nosso componente filho para a nossa página:

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

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

Vamos inserir o componente importado. Para isso, usamos a tag com o nome da variável do componente:

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

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