Next.jsとwebpackでのインポートを楽にする - iOSエンジニアのつぶやき

動機

他の階層のモジュールを相対パスでインポートすると、見辛いし、パスが変更した時に書き換えが大変ですよね👀

import Hoge from '../../../components/templates/Hoge'

なので、下記のようにしたい。

import Hoge from '~/components/templates/Hoge'

結論

まずは、next.config.js のwebpackの設定でconfig.resolve.alias['~'] = path.resolve(__dirname)を追加して、モジュールのエイリアスを~でアクセスできるようにします.

const path = require('path')

module.exports = {
  webpack(config, options) {
    config.resolve.alias['~'] = path.resolve(__dirname)
    return config
  },
  distDir: '../.next'
}

次にTypeScript側でもPathを解決できるようにtsconfig.jsonのcompilerOptionsで下記を追加します。

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

これで、下記のように~でモジュールを絶対パスで指定できるようになりました。

import Hoge from '~/components/templates/Hoge'

てな感じで本日も以上となります🍺

参考

その他の記事

yamato8010.hatenablog.com