Next.jsでimportのaliasを貼る時に、自分がハマったのでその時に解決した方法を解説していきます。
手順だけ知りたい人は手順から読んでください。

この記事で解説する手順はTypeScriptを利用している時に綺麗にできる方法です。
TypeScriptなんて使ってないぞと言う人は下の背景とまとめだけ読んでいただければいい方法が見つかるかもしれません。

背景

TypeScriptを導入したプロジェクトでは~にsrcディレクトリなどのaliasを貼るのにいろいろな場所にコンフィグを書かなければいけません。

多くの記事で紹介されているのはtsconfig.jsonとwebpack.config.jsに設定を記述してeslint-import-resolver-webpackを使って解決する方法です。

それぞれのファイルでは以下のように記述します。

tsconfig.json

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

webpack.config.js

const path = require('path');

module.exports = {
  // ...
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './src'),
    },
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  }
  // ...
};

.eslintrc.js

const path = require('path');

module.exports = {
  // ...
  settings: {
    'import/resolver': {
      webpack: {
        config: path.resolve(__dirname, './webpack.config.js')
      },
    },
  },
  // ...
};

しかしこのissueで議論されているように、Next.jsはwebpack.config.jsを読み込まないため、この方法を使うことができません。

このコメントで書かれているように設定することでaliasを貼ることができますが、本来不要なwebpack.config.jsとalias-config.jsを書かないといけなくなり、あまりスマートじゃありません。

もし、Next.jsのプロジェクトにTypeScriptを使っている場合、eslint-import-resolver-typescriptを使うことで簡単に解決できます。

手順

まず、必要なパッケージを追加します。

# npm 
npm i -D eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript
 
# yarn 
yarn add -D eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript

あとは、必要なコンフィグを書いていきます。

tsconfig.json

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

next.config.js

const path = require('path');

module.exports = {
  // ...
  webpack(config) {
    config.resolve.alias = {
      '~': path.resolve(__dirname, './src/'),
    };
    return config;
  },
  // ...
};

.eslintrc.js

const path = require('path');

module.exports = {
  // ...
  plugins: [
    // ...
    'import'
  ],
  settings: {
    'import/resolver': {
      typescript: {
        config: path.join(__dirname, './webpack.config.js'),
        alwaysTryTypes: true
      },
    },
  },
  // ...
};

ここまでできれば、プロジェクトの中で~/hogeでimportできるはずです。

まとめ

最後まで読んでいただきありがとうございました。

今回はTypeScriptを使っていることを前提に話していきましたが、TypeScriptを導入していない場合はこのコメントで書かれている通りに記述するのが一番綺麗にできると思います。
どうしてもファイルを増やしたくない場合はeslint-import-resolver-aliasを使うのも一つの方法です。

他にいい方法があれば、是非コメントで教えてください！

背景

手順

まとめ

参考