概要

Next.jsでコンポーネントなどをインポートするときにvscodeに自動補完してもらうと、ついつい↓のような../地獄のひどいimportをしちゃいがちに。

1import { ArticleProps } from "../../../../lib/type";

そこでこれをパスのエイリアスを用いて↓のように見やすくしようというのが目的。

1import { ArticleProps } from "~/lib/type";

ただ、クリティカルにどこを設定すればいいのかがネットの記事によってバラバラだったので、改善に伴って自分で検証してみました。

※検証にはNext.js13.5.6を使用

結論

jsconfig.json・tsconfig.jsonを編集

ただjsconfig.jsonもしくはtsconfig.jsonを次のように編集すればいいだけ。

tsconfig.json
1{
2  "compilerOptions": {
3 ~ 中略 ~
4    // 必要に応じてbaseUrlを変更 なければtsconfig.jsonと同階層のディレクトリから見た指定になる
5    // "baseUrl": ".",
6    "paths": {
7      // 記号は何でも良さげ
8      "@/*": ["./src/app/*"],
9      "~/*": ["./*"]
10    }
11}

いくつでも設定できるみたいなので、適当な記号を割り当てエイリアス設定して読みやすいコードにしていきましょう！

参考資料

下記記事によるとNext.js 9.4以降から既に上記の設定方法で良かった模様。