Props Komponen di NextJS

Di NextJS, sama seperti di React, data dari komponen induk ke komponen anak dapat diteruskan melalui props.

Mari kita lihat bagaimana hal ini dilakukan dalam praktiknya. Misalkan komponen anak kita dapat menerima props:

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

Mari kita tampilkan mereka di markup komponen:

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

Misalkan di komponen induk komponen anak kita diimpor:

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

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

Mari kita teruskan data dari induk ke komponen anak:

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