Next.jsでコンポーネントをインポートするときにNuxt.jsのように「~」や「@」を使いたい 💻

これまで、Next.jsでコンポーネントをインポートする際は、相対パスを使っていたのですが、コンポーネントを別のディレクトリに移動した際に、パスを書き換えなければならないこともしばしばありまして。Nuxt.jsのように「~」とか「@」を使う方法はないものかと調べたところ、ありました。

nextjs.org

僕は、srcディレクトリの中に諸々を入れているため、

tsconfig.jsonに、

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

と記載すれば、これまで、

import GlobalNavigation from '../molecules/GlobalNavigation';

のように書いていたインポートを、

import GlobalNavigation from '~/components/molecules/GlobalNavigation';

とか、

import GlobalNavigation from '@/components/molecules/GlobalNavigation';

のように書くことができるようになります。