NextJS में डेटा आयात करना

NextJS में हम मनमानी फाइलों को आयात और निर्यात कर सकते हैं। यह आपको आना चाहिए, यदि आपने ES6 मॉड्यूल के साथ काम किया है। तार्किक रूप से, यह NextJS में भी काम करेगा, लेकिन नौसिखियों के लिए यह हमेशा स्पष्ट नहीं होता। इसलिए आइए आयात के बारे में बात करते हैं।

उदाहरण के लिए मान लीजिए कि हमारे पास एक निश्चित पेज है। इस पेज पर हम कुछ डेटा दिखाना चाहते हैं। मान लीजिए, उदाहरण के लिए, हमारे पास डेटा का कुछ सरणी है। मान लीजिए कि यह डेटा इतना बड़ा है, कि हमें इसे अलग फाइल में रखना सुविधाजनक लगता है।

इस फाइल का नाम कोई भी हो सकता है। मान लीजिए data.js होगा। इस फाइल में हम डेटा के साथ एक सरणी रखेंगे। और page.jsx फाइल में हमारा पेज होगा, जिसे NextJS द्वारा स्वयं प्रोसेस किया जाएगा और ब्राउज़र को दिया जाएगा।

यानी हमारे पास निम्नलिखित फाइल संरचना होगी:

• /src//app//test/page.jsxdata.js

हमारी data.js फाइल में डेटा के साथ कुछ सरणी रखते हैं:

src/app/test/data.jsexport default [
  1, 2, 3, 4, 5,
];

page.jsx पेज बनाते हैं:

src/app/test/page.jsxexport default function Test() {
  return <h1>Test</h1>;
}

अपने पेज से डेटा की सरणी को कनेक्ट करते हैं:

src/app/test/page.jsximport data from './data.js';

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

लूप में इस डेटा को आउटपुट करते हैं:

src/app/test/page.jsximport 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>
  </>;
}

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

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