Mengimport Data dalam NextJS

Dalam NextJS, kita boleh melakukan import dan export fail sewenang-wenangnya. Ini anda sepatutnya sudah tahu, jika anda pernah bekerja dengan modul ES6. Secara logiknya, ini akan berfungsi juga dalam NextJS, tapi bagi pemula ini tidak selalu jelas. Oleh itu, mari kita bercakap tentang import.

Sebagai contoh, katakan kita mempunyai suatu halaman. Pada halaman ini kita mahu memaparkan beberapa data. Katakan, sebagai contoh, kita mempunyai beberapa array dengan data. Katakan data ini begitu besar, sehingga kami rasa lebih mudah untuk mengasingkannya kepada fail berasingan.

Nama fail ini boleh apa sahaja. Katakan data.js. Dalam fail ini kami akan letakkan array dengan data. Dan dalam fail page.jsx akan ada halaman yang akan diproses oleh NextJS sendiri dan dihantar ke pelayar.

Iaitu, kita akan mempunyai struktur fail berikut:

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

Mari letakkan dalam fail data.js kami beberapa 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>;
}

Sambungkan ke halaman kami array dengan data:

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

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

Paparkan data ini dalam gelung:

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