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

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