[Error] Module not found: Can't resolve 'fs' (Next.js バージョン9.3と9.4での対処法)

はじめに

この記事では、Next.jsでModule not found: Can't resolve 'fs'のようなエラーを、バージョンがそれぞれ9.3以前と9.4以降の時の対処法を書きます。

バージョン9.4の場合

以下の条件によって、設定ファイルの有無が決まります。

fsを使う場所	設定ファイル
getStaticProps と getServerSideProps	false
それ以外(例えば、通常の関数内)	true

つまり、getStaticProps と getServerSideProps関数以外でもfsを使う場合は
次のような設定ファイルが必要になります。
空のオブジェクト渡すことで、npmパッケージがfsモジュールに依存しないようにします。

next.config.js

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.node = {
        fs: 'empty'
      };
    }

    return config;
  }
};

バージョン9.3以前

以下の条件によって、設定ファイルの有無が決まります。

fsを使う場所	設定ファイル
getInitialProps	false
それ以外(例えば、通常の関数内)	true

注意

getInitialProps内で使用する場合は、上述した設定ファイルは不要ですが
client bundleをビルドをする場合は、設定ファイルが必要だそうです。

なぜ、こんなややこしい？

そもそも、fsの処理はクライアント側でなく、サーバー側のコードでのみ動くものだからだそうです。

参考