Importul datelor în NextJS

În NextJS putem efectua importul și exportul fișierelor arbitrare. Acest lucru ar trebui să știți deja să faceți, dacă ați lucrat cu modulele ES6. Este logic că acest lucru va funcționa și în NextJS, dar pentru începători acest lucru nu este întotdeauna evident. Deci, să vorbim despre importuri.

De exemplu, să presupunem că avem o anumită pagină. Pe această pagină dorim să afișăm unele date. Să presupunem, de exemplu, că avem un anumit array cu date. Să zicem că aceste date sunt atât de mari, încât ni se pare convenabil să le mutăm într-un fișier separat.

Numele acestui fișier poate fi orice. Să fie data.js. În acest fișier vom plasa array-ul cu date. Iar în fișierul page.jsx va fi pagina noastră, care va fi procesată de către NextJS însuși și trimisă în browser.

Adică vom avea următoarea structură de fișiere:

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

Să plasăm în fișierul nostru data.js un anumit array cu date:

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

Să creăm pagina page.jsx:

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

Să conectăm la pagina noastră array-ul cu date:

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

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

Să afișăm aceste date într-o buclă:

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,
  },
];