Importación de componentes en NextJS

Se pueden importar no solo archivos con datos, sino también componentes de manera similar a como estamos acostumbrados a trabajar en React normal. Veamos cómo funciona.

Para empezar, establezcamos algunas convenciones. Como ya sabes, en la carpeta src/app se ubican las páginas del sitio. Ubiquemos los componentes hijos en la carpeta src/comp.

Ahora conectemos un componente hijo a alguna página. Supongamos que tenemos la siguiente página:

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

Supongamos que tenemos el siguiente componente hijo:

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

Importemos nuestro componente hijo a nuestra página:

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

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

Realicemos la inserción del componente importado. Para esto usamos la etiqueta con el nombre de la variable del componente:

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

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

Crea varios componentes hijos. Impórtalos a tus páginas.