Mengimpor Data ke dalam NextJS

Di NextJS, kita dapat melakukan impor dan ekspor file arbitrer. Hal ini sudah seharusnya Anda kuasai jika Anda pernah bekerja dengan ES6 modules. Secara logis, ini juga akan bekerja di NextJS, tapi bagi pemula hal ini tidak selalu jelas. Oleh karena itu, mari kita bicara tentang impor.

Sebagai contoh, misalkan kita memiliki suatu halaman. Di halaman ini kita ingin menampilkan beberapa data. Misalnya, kita memiliki suatu array dengan data. Misalkan data ini sangat besar, sehingga kita merasa lebih mudah untuk memisahkannya ke dalam file terpisah.

Nama file ini bisa berupa apa saja. Misalkan data.js. Di file ini kita akan menempatkan array dengan data. Dan di file page.jsx akan berisi halaman yang akan diproses oleh NextJS sendiri dan dikirim ke browser.

Artinya, kita akan memiliki struktur file berikut:

/src/
- /app/
  - /test/
    - page.jsx
    - data.js

Mari tempatkan di file data.js kita suatu array dengan data:

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

Mari buat halaman page.jsx:

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

Mari hubungkan array dengan data ke halaman kita:

import data from './data.js';

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

Mari tampilkan data ini dalam sebuah loop:

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

Misalkan diberikan array post berikut:

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

Tampilkan produk-produk ini dalam bentuk daftar ul.

Misalkan diberikan array produk berikut:

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

Tampilkan produk-produk ini dalam bentuk tabel HTML.