Importul componentelor în NextJS

Puteți importa nu numai fișiere cu date, ci și componente similar modului în care suntem obișnuiți să lucrăm în React obișnuit. Să vedem cum funcționează.

Pentru început, să stabilim câteva convenții. După cum știți deja, în folderul src/app sunt plasate paginile site-ului. Să plasăm componentele copil în folderul src/comp.

Acum să conectăm o componentă copil la o pagină. Să presupunem că avem următoarea pagină:

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

Să presupunem că avem următoarea componentă copil:

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

Să importăm componenta noastră copil în pagina noastră:

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

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

Să efectuăm inserarea componentei importate. Pentru aceasta, folosim tag-ul cu numele variabilei componentei:

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

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