NextJS'te Veri İçe Aktarma

NextJS'te keyfi dosyaları içe aktarabilir ve dışa aktarabiliriz. Bunu, ES6 modülleri ile çalıştıysanız zaten biliyor olmalısınız. Mantıken, bu NextJS'te de çalışacaktır, ancak yeni başlayanlar için bu her zaman açık değildir. Bu yüzden içe aktarmalardan bahsedelim.

Örnek olarak, bir sayfamız olsun. Bu sayfada bazı verileri göstermek istiyoruz. Örneğin, bazı verileri içeren bir dizimiz olsun. Bu veriler o kadar büyük olsun ki, onları ayrı bir dosyaya taşımanın uygun olacağını düşünüyoruz.

Bu dosyanın adı herhangi bir şey olabilir. data.js olsun. Bu dosyaya veri dizimizi yerleştireceğiz. page.jsx dosyasında ise, doğrudan NextJS tarafından işlenen ve tarayıcıya sunulan sayfamız olacak.

Yani aşağıdaki dosya yapısına sahip olacağız:

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

data.js dosyamıza bazı verileri içeren bir dizi yerleştirelim:

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

page.jsx sayfasını oluşturalım:

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

Sayfamıza veri dizisini bağlayalım:

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

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

Bu verileri bir döngüde gösterelim:

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