Tietojen tuonti NextJS:ään

NextJS:ssä voimme suorittaa mielivaltaisten tiedostojen tuonnin ja viennin. Tämän sinun pitäisi jo osata, jos olet työskennellyt ES6-moduulien kanssa. On loogista, että tämä toimii myös NextJS:ssä, mutta aloittelijoille se ei aina ole itsestään selvää. Joten puhutaanpa tuonnista.

Esimerkiksi oletetaan, että meillä on tietty sivu. Tällä sivulla haluamme näyttää joitain tietoja. Oletetaan esimerkiksi, että meillä on tietty taulukko tiedoilla. Oletetaan, että nämä tiedot ovat niin suuria, että koemme kätevänä sijoittaa ne erilliseen tiedostoon.

Tämän tiedoston nimi voi olla mikä tahansa. Olkoon se data.js. Tähän tiedostoon me sijoittamme taulukon tiedoilla. Ja tiedostossa page.jsx on sivu, jota NextJS itse käsittelee ja toimittaa selaimelle.

Eli meillä on seuraava tiedostorakenne:

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

Sijoittakaamme tiedostoomme data.js jokin taulukko tiedoilla:

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

Tehdään sivu page.jsx:

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

Yhdistetään sivuillemme taulukko tiedoilla:

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

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

Esitetään nämä tiedot silmukassa:

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