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 टेबल के रूप में आउटपुट करें।