การนำเข้าข้อมูลใน NextJS

ใน NextJS เราสามารถทำการนำเข้า และส่งออกไฟล์ตามต้องการได้ นี่คือสิ่งที่ คุณควรจะสามารถทำได้หากคุณเคยทำงานกับ ES6 โมดูล มาแล้ว ตามตรรกะแล้วสิ่งนี้จะทำงานใน NextJS ด้วย แต่มันอาจไม่ชัดเจนสำหรับผู้เริ่มต้นเสมอไป ดังนั้นเรามาพูดถึงเรื่องการนำเข้า (import) กัน

สำหรับตัวอย่าง สมมติว่าเรามีหน้าเพจหนึ่ง บนหน้าเพจนี้เราต้องการแสดงข้อมูลบางอย่าง ตัวอย่างเช่น สมมติว่าเรามีอาร์เรย์ข้อมูลบางชุด สมมติว่าข้อมูลนี้มีขนาดใหญ่มาก จนเราคิดว่าสะดวกกว่าที่จะแยกมันออกไปไว้ ในไฟล์แยกต่างหาก

ชื่อของไฟล์นี้สามารถเป็นอะไรก็ได้ สมมติว่าเป็น data.js ในไฟล์นี้ เราจะวางอาร์เรย์ที่มีข้อมูล และในไฟล์ page.jsx จะเป็นหน้าที่ ซึ่งถูกประมวลผลโดยตัว NextJS เองและส่งไปยังเบราว์เซอร์

นั่นคือเราจะมีโครงสร้างไฟล์ดังต่อไปนี้:

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

มาใส่ข้อมูลอาร์เรย์บางส่วนในไฟล์ data.js ของเรา:

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

สร้างหน้า page.jsx:

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

เชื่อมต่ออาร์เรย์ข้อมูลของเราเข้ากับหน้าเพจของเรา:

import data from './data.js';

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

แสดงข้อมูลนี้ในลูป:

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

ให้มีอาร์เรย์โพสต์ต่อไปนี้:

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

แสดงผลิตภัณฑ์เหล่านี้ ในรูปแบบรายการ ul

ให้มีอาร์เรย์ ผลิตภัณฑ์ต่อไปนี้:

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

แสดงผลิตภัณฑ์เหล่านี้ ในรูปแบบตาราง HTML