Next.jsでのエイリアス設定とModule not foundエラーの解決方法

現象

Next.jsの書籍で勉強しながら開発を進めていたところ、エイリアスを使用してモジュールをインポートしようとしたが、Module not found: Can't resolve '@/styles/globals.css' のようなエラーが発生した。
ずっと正常に動いており、cssファイルは一切触っていなかったがこのエラーが起き、とても戸惑った。
同じ現象で困っている人の解決に費やす時間を少しでも短くできたらと思う。

結論

1. tsconfig.jsonにエイリアス設定が不足していた。
2. エイリアスの設定が正しく機能していなかった。

この現象が起きた原因

私が書籍の通り進めていくうちに、TypeScriptを設定する章に入り、書籍通りに進めていたところ、「このコードをtsconfig.jsonを作成して貼り付けろ」という指示が出た。
このコードを貼り付けてからyarn devをすると、エラーを吐く様になった。

原因としては、書籍からコピーしたtsconfig.jsonにエイリアスの指定がなかったからだ。
エイリアスとは絶対指定の@のことを指す。

ならなぜ初めの方は動いていたのかというと、初めはTypeScriptは使用していなかったため、create-next-appの際に作成されたjsconfig.jsonにエイリアスを指定する記述があったからだ。

当たり前のことだが、どうやら開いているページに使っているファイルの拡張子が「.jsまたは.jsx」の場合はjsconfig.jsonを読み込み、「.tsまたは.tsx」の場合はtsconfig.jsonを読み込んでいるようだ。

解決方法

エイリアスの設定をtsconfig.jsonに追加する

tsconfig.jsonにbaseUrlとpathsオプションを含めることで、エイリアスが正しく設定される。
エラーを吐いている文の@のすぐ後ろのフォルダを以下の様に指定してあげることで直すことが出来た

{
  "compilerOptions": {
    // ...その他の設定
    "baseUrl": ".",
    "paths": {
      "@/styles/*": ["styles/*"], //stylesフォルダのエイリアスを追加
      "@/utils/*": ["utils/*"] //utilsフォルダの追加
    }
  },
  // ...その他の設定
}

上記の対処法でダメな場合

エイリアスを使わずに相対パスを使用する

好みによっては嫌な方がいるかもしれないが、もしエイリアスが上記の対処法で機能しない場合は、相対パスを使用してインポートを試みると改善されるはずだ

例

import styles from "../../styles/globals";

最後に

書籍の通り進めても、今回の様な書籍に書かれていないエラーが発生するため、ここを調べて乗り越える力が、書籍で勉強するには必要な力のようだ...