Next.jsのモジュールのImportを相対パスではなく絶対パスでも書かけるようにする方法

階層が深くなってきたときにいちいち ../../components/layout などとしていて面倒だったことから、絶対パスで書きたくなりました。

結論

next.config.jsonに以下のようにすれば絶対パスで指定することができるようになります。

module.exports = {
  webpack(config) {
    config.resolve.modules.push(__dirname)
    return config
  },
}

引き続き相対パスでも書くことも出来ます。

$ ls
components/  next.config.js  package-lock.json  pages/   README.md
node_modules/   package.json public/  stylesheets/

Before(相対パス)

import Layout from "../../components/layout"

After(絶対パス)

import Layout from "components/layout"