Mengimport Data dalam NextJS

Dalam NextJS, kita boleh melakukan import dan export fail sewenang-wenangnya. Ini anda sepatutnya sudah tahu, jika anda pernah bekerja dengan modul ES6. Secara logiknya, ini akan berfungsi juga dalam NextJS, tapi bagi pemula ini tidak selalu jelas. Oleh itu, mari kita bercakap tentang import.

Sebagai contoh, katakan kita mempunyai suatu halaman. Pada halaman ini kita mahu memaparkan beberapa data. Katakan, sebagai contoh, kita mempunyai beberapa array dengan data. Katakan data ini begitu besar, sehingga kami rasa lebih mudah untuk mengasingkannya kepada fail berasingan.

Nama fail ini boleh apa sahaja. Katakan data.js. Dalam fail ini kami akan letakkan array dengan data. Dan dalam fail page.jsx akan ada halaman yang akan diproses oleh NextJS sendiri dan dihantar ke pelayar.

Iaitu, kita akan mempunyai struktur fail berikut:

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

Mari letakkan dalam fail data.js kami beberapa array dengan data:

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

Mari buat halaman page.jsx:

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

Sambungkan ke halaman kami array dengan data:

import data from './data.js';

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

Paparkan data ini dalam gelung:

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

Katakan diberikan array siaran berikut:

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

Paparkan produk-produk ini dalam bentuk senarai ul.

Katakan diberikan array dengan produk berikut:

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

Paparkan produk-produk ini dalam bentuk jadual HTML.