NextJSでのデータインポート

NextJSでは、任意のファイルのインポートやエクスポートを実行できます。これは、ES6モジュールを扱ったことがあれば、すでにできるはずです。当然、これは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テーブルとして表示してください。