【next.js】相対パスで指定するのは、もう古い！？たった数行の追加で絶対パスが使える方法とは？

概要

・jsconfig.jsonを使えば絶対パスを指定できる
・pathsプロパティで各フォルダーごとの絶対パスを指定できる

絶対パスを指定する方法

ルートディレクトリにjsconfig.jsonファイルを作成して、
以下の内容をコピペすればルートディレクトリからのパスでファイルをインポートできます。

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
  }
}

pages/index.jsx

import React from 'react';
import Header from "src/comp/Header"

export default function index() {

  return (
      <>
        <Header/>
      </>
  );
}

jsconfig.jsonでは何をしているのか？

上記のソースで何を指定してるのかを説明していきます。
まず、jsconfig.jsonとは何なのかというとjavascriptによって提供されるルートファイルとオプションを設定できるファイルです。

このファイルを使ってプロジェクト内で絶対パスの指定を可能にしています。
また、jsconfig.jsonはプロジェクトのルートディレクトリ配下に保存してください。

オプションの設定

compilerOptionsにbaseUrlのプロパティを指定しています。
このプロパティではファイルを読み込む際のベースとなるディレクトリを定義しており、「.」を指定することでルートディレクトリを指定できます。

あとは、各ファイル内で他のファイルをルートディレクトリからのパスで指定すれば読み込めるというわけです。

各フォルダーごとの絶対パスでインポート

jsconfig.jsonにはルートディレクトリからの絶対パスの指定だけでなく、各フォルダーごとに別名を定義し、その名前で呼び出すことができます。

どういうことかというと、「src/comp/header.jsx」というファイルがあった時にcompフォルダーを「@comp」に書き換えて、「@comp/header.jsx」で読み込めるのです。

・「src/comp」⇒「@comp」

この方法を使うことでフォルダーごとにインポートできるため、importの指定方法を簡略化することができます。

それで、どうやって実装するのかというとpathsプロパティを使います。
このプロパティは、「ディレクトリ」と「別名」をマッピングしていきます。

jsconfig.json

{
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@comp/*": ["./src/comp/*"],
      }
    }
  }

pages/index.jsx

import React from 'react';
import Header from "@comp/Header"

export default function index() {

  return (
      <>
        <Header/>
      </>
  );
}

この例では、「/src/comp」を「@comp」として別名で定義しています。

また、複数指定できるので
・コンポファイル
・ライブラリファイル
などフォルダーを追加していくごとに別名を追加していけばいいのではないでしょうか？

参考

jsconfigについて
next.jsで絶対パスでの指定方法