Komponentu props NextJS

NextJS, tāpat kā React, datus no vecāku komponentiem uz apakšējiem komponentiem var nodot caur props.

Apskatīsim, kā tas tiek darīts praksē. Pieņemsim, ka mūsu apakšējais komponents var saņemt props:

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

Attēlosim tos komponenta izskatā:

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

Pieņemsim, ka vecākā komponentā tiek pieslēgts mūsu apakšējais komponents:

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

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

Nododim apakšējā komponentā datus no vecākā komponenta:

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

export default function Test() {
  return <>
    <h1>Test</h1>
    <Child text1="aaa" text2="bbb" />
  </>;
}

prods.jslet prods = [
  {
    id: 1,
    name: 'prod1',
    cost: 100,
  },
  {
    id: 2,
    name: 'prod2',
    cost: 200,
  },
  {
    id: 3,
    name: 'prod3',
    cost: 300,
  },
];