Տվյալների ներմուծում 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 աղյուսակ։