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から遠く離れた場所にあります。 データファイルをページファイルにインポートしてみましょう。 そのために相対パスを使用します：

src/app/test/page.jsximport data from '../../data.js';

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

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

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

src/app/test/page.jsximport data from '@/data.js';

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

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