NextJSにおけるサイトルートからのインポート

このレッスンでは、NextJSにおけるインポートについてさらに学んでいきます。しかし今回は、NextJSにはあるが NodeJSにはない機能について学びます。

NodeJSでは、インポート時に相対パス（先頭のスラッシュなし）を使用するか、オペレーティングシステムのルートからの絶対パス（プロジェクトを別のコンピュータに移動する際に問題が生じる）を使用するかのどちらかです。

しかし実際には、プロジェクトのルートからのインポートというもう一つのタイプが必要です。NodeJSにはこのようなインポートは組み込まれていませんが、NextJSにはあります。

このインポートはNextJSをインストールする際に有効になります。覚えていますか？あのWould you like to customize the default import aliasという質問がありましたよね？これにYesと答えると、プロジェクトのルートからのインポートを設定できるようになります。

では、その方法を見てみましょう。例として、以下のファイル構造があるとします：

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

ご覧の通り、ファイルdata.jsはファイルpage.jsxから遠く離れた場所にあります。データファイルをページファイルにインポートしてみましょう。そのために相対パスを使用します：

import data from '../../data.js';

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

ご覧の通り、相対パスによるインポートはあまり便利ではありません。なぜなら、パスを../から始めなければならないからです。さらに、コンポーネントを別の場所に移動させると、データファイルへのパスが壊れてしまいます。

プロジェクトのルート（srcフォルダがルートとみなされます）からのファイルへのパスを指定する方がより便利です。そのためには、パスの先頭に記号@を書く必要があります。やってみましょう：

import data from '@/data.js';

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

再度強調しますが、このようなインポートはNextJSで特に可能であり、インストール時に適切な質問に正しく答えた場合のみ機能します。 NodeJSだけ、または純粋なJavaScriptではこれは機能しません。

以下のファイル構造が与えられています：

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

データファイルをコンポーネントTestにインポートしてください。インポート時にはプロジェクトのルートからのパスを指定してください。

ファイル構造を以下のように変更してください：

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

プロジェクトのルートからのインポートが依然として問題なく機能することを確認してください。