Komponenten-Props in NextJS

In NextJS können Daten, genau wie in React, von übergeordneten Komponenten an untergeordnete Komponenten über Props übergeben werden.

Sehen wir uns praktisch an, wie das gemacht wird. Nehmen wir an, unsere untergeordnete Komponente kann Props entgegennehmen:

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

Geben wir sie im Markup der Komponente aus:

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

Nehmen wir an, in der übergeordneten Komponente wird unsere untergeordnete Komponente importiert:

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

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

Übergeben wir nun Daten aus der übergeordneten Komponente an die untergeordnete Komponente:

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,
  },
];