Տվյալների ներմուծում 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,
  },
];