Nhập dữ liệu trong NextJS

Trong NextJS, chúng ta có thể thực hiện nhập và xuất các tệp tùy ý. Điều này bạn đã phải biết nếu bạn đã làm việc với ES6 modules. Hợp lý là điều này cũng sẽ hoạt động trong NextJS, nhưng đối với người mới thì không phải lúc nào cũng rõ ràng. Vì vậy, hãy nói về việc nhập dữ liệu.

Lấy ví dụ chúng ta có một trang. Trên trang này, chúng tôi muốn hiển thị một số dữ liệu. Ví dụ, giả sử chúng ta có một mảng dữ liệu nào đó. Giả sử dữ liệu này quá lớn, khiến chúng ta cảm thấy thuận tiện khi tách nó ra thành một tệp riêng biệt.

Tên của tệp này có thể là bất kỳ tên nào. Giả sử là data.js. Trong tệp này chúng ta sẽ đặt một mảng dữ liệu. Còn trong tệp page.jsx sẽ là trang, sẽ được xử lý bởi chính NextJS và gửi đến trình duyệt.

Tức là chúng ta sẽ có cấu trúc tệp như sau:

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

Hãy đặt trong tệp data.js của chúng ta một mảng dữ liệu nào đó:

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

Tạo trang page.jsx:

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

Kết nối mảng dữ liệu với trang của chúng ta:

import data from './data.js';

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

Hiển thị dữ liệu này trong một vòng lặp:

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

Giả sử có mảng bài viết sau:

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

Hãy hiển thị các bài viết này dưới dạng danh sách ul.

Giả sử có mảng sản phẩm sau:

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

Hãy hiển thị các sản phẩm này dưới dạng bảng HTML.