Mengimpor Data ke dalam NextJS

Di NextJS, kita dapat melakukan impor dan ekspor file arbitrer. Hal ini sudah seharusnya Anda kuasai jika Anda pernah bekerja dengan ES6 modules. Secara logis, ini juga akan bekerja di NextJS, tapi bagi pemula hal ini tidak selalu jelas. Oleh karena itu, mari kita bicara tentang impor.

Sebagai contoh, misalkan kita memiliki suatu halaman. Di halaman ini kita ingin menampilkan beberapa data. Misalnya, kita memiliki suatu array dengan data. Misalkan data ini sangat besar, sehingga kita merasa lebih mudah untuk memisahkannya ke dalam file terpisah.

Nama file ini bisa berupa apa saja. Misalkan data.js. Di file ini kita akan menempatkan array dengan data. Dan di file page.jsx akan berisi halaman yang akan diproses oleh NextJS sendiri dan dikirim ke browser.

Artinya, kita akan memiliki struktur file berikut:

• /src//app//test/page.jsxdata.js

Mari tempatkan di file data.js kita suatu array dengan data:

src/app/test/data.jsexport default [
  1, 2, 3, 4, 5,
];

Mari buat halaman page.jsx:

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

Mari hubungkan array dengan data ke halaman kita:

src/app/test/page.jsximport data from './data.js';

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

Mari tampilkan data ini dalam sebuah loop:

src/app/test/page.jsximport data from './data.js';

export default function Test() {
  let list = data.map(function(item) {
    return <li>{item}</li>
  });
  
  return <>
    <h1>Test</h1>
    <ul>
      {list}
    </ul>
  </>;
}

posts.jslet posts = [
  'post1',
  'post2',
  'post3',
  'post4',
  'post5',
];

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