NextJSでのデータインポート

NextJSでは、任意のファイルのインポートやエクスポートを実行できます。 これは、ES6モジュールを扱ったことがあれば、すでにできるはずです。 当然、これは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,
  },
];