Next.jsでstylesやcomponentsを絶対パスで指定する方法

next.jsで開発をする上で、componentsなどの読み込みは頻繁に発生します。
しかし、デフォルトのままだと、相対パスで読み込む必要があり、非常に面倒です。
なので、ファイルの読み込みを絶対パスにする方法をメモしておきます。

componentsやlayoutを絶対パスにする方法

tsconfig.jsonに追記します。

{
  "compilerOptions": {
    "baseUrl": ".", //これがないとエラーになります。
    "paths": {
      "@/*": ["./*"]
    }
  }
}

これによってbaseUrl（アプリケーションのhomeディレクトリ）がtsconfigがあるフォルダになり、さらに、pathに@/~~と指定したときに、./~~を参照するようになります。
なので下記のように指定すればcomponents配下のbuttonコンポーネントをインポートできます。

import Button from "@/components/button"

stylesを絶対パスで読み込む方法

stylesを絶対パスで読み込むためには、next.config.jsを編集します。
下記のように、sassOptionsを追加して、stylesを読み込むパスを指定します。

//追記
const path = require("path");

const nextConfig = {
//追記
  sassOptions: {
    includePaths: [path.join(__dirname, "styles")],
  },
};

module.exports = nextConfig;

これで下記のようにstylesを読み込むことができるようになります。

import styles from "styles/Button.module.scss";

ディレクトリ構成は非常に重要

アプリケーションを作る上で、ディレクトリ構成・インポートの効率化は非常に重要です。
基本的には、next.config.jsまたはtsconfig.jsonを編集することでこのような指定をすることができるので、しっかり応用して、さまざまなディレクトリ構成に対応できるようになっておく必要がありそうです。