NextJS-da maglumatlary import etmek

NextJS-da biz islendik faýllary import we export edip bileris. Eger siz ES6 modullary bilen işleseňiz, buny edip bilmelisiňiz. Bu NextJS-de hem işleýär, ýöne täze gelýänler üçin bu her wagt aýdyň däl. Şonuň üçin importlar hakda gürleşeliň.

Mysal üçin diňe bir sahypamyz bar diýeliň. Bu sahypada käbir maglumatlary görkezmek isleýäris. Mysal üçin, bizde käbir maglumatlar toplumy bar diýeliň. Bu maglumatlar şeýle uly bolsun, olary aýratyn faýla çykarmak amatly diýip pikir edýäris.

Bu faýlyň ady islendik bolup biler. data.js bolsun. Bu faýlyň içinde biz maglumatlar toplumyny ýerleşdireris. page.jsx faýlynda bolsa NextJS tarapyndan işlenip, brauzere berilýän sahypa bolup durar.

Ýagny, bizde aşakdaky faýl gurluşy bolup durar:

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

data.js faýlymyzyň içine birnäçe maglumatlar toplumyny ýerleşdireliň:

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

page.jsx sahypasyny düzeliň:

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

Sahypamyza maglumatlar toplumyny birikdireliň:

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

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

Bu maglumatlary aýlawda görkezeliň:

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