Impor Komponen di NextJS

Yang dapat diimpor bukan hanya file berisi data, tetapi juga komponen seperti cara yang biasa kita lakukan saat bekerja dalam React biasa. Mari kita lihat bagaimana cara kerjanya.

Pertama, mari kita tentukan beberapa kesepakatan. Seperti yang sudah Anda ketahui, di folder src/app terdapat halaman-halaman situs. Mari tempatkan komponen anak di folder src/comp.

Sekarang mari kita hubungkan komponen anak ke suatu halaman. Misalkan kita memiliki halaman seperti ini:

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

Misalkan kita memiliki komponen anak berikut:

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

Mari impor komponen anak kita ke halaman kita:

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

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

Lakukan penyisipan komponen yang diimpor. Untuk ini, gunakan tag dengan nama variabel komponen:

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

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