Importazione di componenti in NextJS

È possibile importare non solo file di dati, ma anche componenti, in modo simile a come siamo abituati a fare quando lavoriamo in React normale. Vediamo come funziona.

Per iniziare, introduciamo alcune convenzioni. Come già sapete, nella cartella src/app sono ospitate le pagine del sito. Creiamo una cartella per i componenti figli in src/comp.

Ora colleghiamo un componente figlio a una pagina. Supponiamo di avere la seguente pagina:

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

Supponiamo di avere il seguente componente figlio:

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

Importiamo il nostro componente figlio nella nostra pagina:

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

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

Inseriamo il componente importato. Per fare questo, usiamo il tag con il nome della variabile del componente:

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

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