მონაცემთა იმპორტი NextJS-ში

NextJS-ში ჩვენ შეგვიძლია შევასრულოთ თვითნებური ფაილების იმპორტი და ექსპორტი. ეს თქვენ უკვე უნდა იცოდეთ, თუ მუშაობდით ES6 მოდულებთან. ლოგიკურია, რომ ეს იმუშავებს NextJS-შიც, მაგრამ ახალბედებს ეს ყოველთვის აშკარა არ არის. ამიტომ, მოდით ვისაუბროთ იმპორტებზე.

მაგალითისთვის გვქონდეს რაღაც გვერდი. ამ გვერდზე გვსურს გამოვიტანოთ რაღაც მონაცემები. მაგალითად, გვქონდეს რაღაც მასივი მონაცემებით. ეს მონაცემები იყოს იმდენად დიდი, რომ ჩვენთვის მოსახერხებელია მათი გამოყოფა ცალკე ფაილში.

ამ ფაილის სახელი შეიძლება იყოს ნებისმიერი. იყოს 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 ცხრილის სახით.