Reactで作成されたプロジェクトをNext.js化して実行しようとした場合に
Module not found: Can't resolve 'fs'
といったエラーが出てNext.jsがうまく起動できないことがあります。
The Module not found: Can’t resolve ‘fs’ と表示されるエラーやこれに似たエラーの原因は、サーバー側では利用できるがブラウザでは利用できないモジュールをインポートしようとした場合に発生するようです。
解決方法その1
next.config.jsに下記のフレーズを追加します。
module.exports = {
webpack: (config, { isServer }) => {
// 空のオブジェクト渡すことでnpmパッケージがfsモジュールに依存しないようにします
if (!isServer) {
config.node = {
fs: 'empty'
}
}
return config
}
}
解決方法その2
解決方法1で解決しない場合は下記の方法を行います。
・フロント側のソースからサーバー側の処理として実行されるソースコードを消す
作成したReactプロジェクトや購入したReactデザインテンプレートではサーバーサイド側の処理も混じっている場合があります。その場合はサーバー側の処理を別プロジェクトに分けて、Next.js化するプロジェクト内からはサーバー側の処理記述のコードを削除することをおすすめします。