Next.js実行時にModule not found: Can’t resolve ‘fs’と表示された場合の対応方法

Reactで作成されたプロジェクトをNext.js化して実行しようとした場合に

Module not found: Can't resolve 'fs'

といったエラーが出てNext.jsがうまく起動できないことがあります。

原因

The Module not found: Can’t resolve ‘fs’ と表示されるエラーやこれに似たエラーの原因は、サーバー側では利用できるがブラウザでは利用できないモジュールをインポートしようとした場合に発生するようです。

解決方法

解決方法その１　

next.config.jsに下記のフレーズを追加します。

module.exports = {
    webpack: (config, { isServer }) => {
        // 空のオブジェクト渡すことでnpmパッケージがfsモジュールに依存しないようにします
        if (!isServer) {
            config.node = {
                fs: 'empty'
            }
        }
        return config
    }
}

解決方法その２　

解決方法１で解決しない場合は下記の方法を行います。

作成したReactプロジェクトや購入したReactデザインテンプレートではサーバーサイド側の処理も混じっている場合があります。その場合はサーバー側の処理を別プロジェクトに分けて、Next.js化するプロジェクト内からはサーバー側の処理記述のコードを削除することをおすすめします。