Importation de données dans NextJS

Dans NextJS, nous pouvons effectuer l'importation et l'exportation de fichiers arbitraires. Vous devriez déjà savoir faire cela si vous avez travaillé avec les modules ES6. Logiquement, cela fonctionnera également dans NextJS, mais cela n'est pas toujours évident pour les débutants. Par conséquent, parlons des imports.

Par exemple, supposons que nous ayons une certaine page. Sur cette page, nous souhaitons afficher des données. Supposons, par exemple, que nous ayons un certain tableau de données. Supposons que ces données soient si volumineuses qu'il nous semble pratique de les extraire dans un fichier séparé.

Le nom de ce fichier peut être quelconque. Soit data.js. Dans ce fichier, nous placerons le tableau de données. Et dans le fichier page.jsx, nous aurons la page qui sera traitée par NextJS lui-même et renvoyée au navigateur.

Autrement dit, nous aurons la structure de fichiers suivante :

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

Plaçons dans notre fichier data.js un certain tableau de données :

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

Créons la page page.jsx :

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

Connectons à notre page le tableau de données :

import data from './data.js';

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

Affichons ces données dans une boucle :

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

Soit le tableau de publications suivant :

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

Affichez ces produits sous forme de liste ul.

Soit le tableau suivant de produits :

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

Affichez ces produits sous forme de tableau HTML.