Tietojen tuonti NextJS:ään

NextJS:ssä voimme suorittaa mielivaltaisten tiedostojen tuonnin ja viennin. Tämän sinun pitäisi jo osata, jos olet työskennellyt ES6-moduulien kanssa. On loogista, että tämä toimii myös NextJS:ssä, mutta aloittelijoille se ei aina ole itsestään selvää. Joten puhutaanpa tuonnista.

Esimerkiksi oletetaan, että meillä on tietty sivu. Tällä sivulla haluamme näyttää joitain tietoja. Oletetaan esimerkiksi, että meillä on tietty taulukko tiedoilla. Oletetaan, että nämä tiedot ovat niin suuria, että koemme kätevänä sijoittaa ne erilliseen tiedostoon.

Tämän tiedoston nimi voi olla mikä tahansa. Olkoon se data.js. Tähän tiedostoon me sijoittamme taulukon tiedoilla. Ja tiedostossa page.jsx on sivu, jota NextJS itse käsittelee ja toimittaa selaimelle.

Eli meillä on seuraava tiedostorakenne:

/src/
- /app/
  - /test/
    - page.jsx
    - data.js

Sijoittakaamme tiedostoomme data.js jokin taulukko tiedoilla:

export default [
	1, 2, 3, 4, 5,
];

Tehdään sivu page.jsx:

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

Yhdistetään sivuillemme taulukko tiedoilla:

import data from './data.js';

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

Esitetään nämä tiedot silmukassa:

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>
	</>;
}

Olkoon annettu seuraava postausten taulukko:

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

Näytä nämä tuotteet listana ul.

Olkoon annettu seuraava taulukko tuotteilla:

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

Näytä nämä tuotteet HTML-taulukkona.