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.jsx
    - data.js

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

export default [
	1, 2, 3, 4, 5,
];

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

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

Sayfamıza veri dizisini bağlayalım:

import data from './data.js';

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

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

import 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>
	</>;
}

Aşağıdaki yazı dizisi verilsin:

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

Bu ürünleri bir ul listesi olarak gösterin.

Aşağıdaki ürün dizisi verilsin:

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

Bu ürünleri bir HTML tablosu olarak gösterin.