Εισαγωγή δεδομένων στο NextJS

Στο NextJS μπορούμε να εκτελούμε εισαγωγή και εξαγωγή αυθαίρετων αρχείων. Αυτό πρέπει ήδη να το γνωρίζετε, εάν έχετε εργαστεί με τα ES6 modules. Λογικά, αυτό θα λειτουργεί και στο 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,
  },
];