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:

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

Supongamos que tenemos el siguiente componente hijo:

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

Importemos nuestro componente hijo a nuestra página:

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

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

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