Next.js+TypeScriptでimportのaliasを設定するのが楽になっていた

importするときに何もしていないと以下のように相対パスで書きますが、階層が深くなると面倒です。

import { Button } from '../../components/Button

それを以下のように書けるようにします。

import { Button } from '@/components/Button

Next.jsでは以前はパッケージを追加して、next.config.jsをつくって設定を書く必要がありました。しかし、v9.4からtsconfig.jsonに書き足すだけでOKになったようです。

nextjs.org

上記のサイトに書いてあるようにtsconfig.jsonのcompilerOptionsに追加するだけです。@から始めたい場合は以下のように書きます。

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