Komponentu imports NextJS

Importēt var ne tikai datņu failus, bet arī komponentus līdzīgi kā mēs esam pieraduši strādājot ar parasto React. Apskatīsim, kā tas darbojas.

Vispirms ieviesīsim dažus vienošanās. Kā jūs jau zināt, mapē src/app tiek izvietotas vietnes lapas. Izvietosim pakārtotos komponentus mapē src/comp.

Tagad pievienosim pakārtoto komponentu kādai lapai. Pieņemsim, ka mums ir šāda lapa:

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

Pieņemsim, ka mums ir šāds pakārtotais komponents:

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

Importēsim mūsu pakārtoto komponentu uz mūsu lapu:

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

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

Veiksim importētā komponenta ievietošanu. Lai to izdarītu, izmantosim tagu ar komponenta mainīgā nosaukumu:

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

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