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:

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

Suponha que temos o seguinte componente filho:

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

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

import 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:

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

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

Crie vários componentes filhos. Importe-os para as suas páginas.