こんにちわ、オオバです。

Next.jsで動いている本ブログ。
バージョンはv10.2.3

最新はバージョン11系です。

更新頻度が高いため、
11系にアプデしたところ、
エラーが起きてしまったので、
対処方法の共有です。

Reactのバージョンアップが必要

pacjage.jsonの書き換え
// 変更前  
"react": "^16.13.1",  
↓  
// 変更後  
"react": "^17.0.2",  

Reactのバージョンを上げることで
Next.js11へのアップデートは無事に完了しました。

以降、詳細を共有します。

この記事の内容

'react/jsx-runtime'エラー発生

"next": "^11.1.2",  

Next.jsを最新の11.1.2にアップデートしたところ、
Reactでエラーが起きました。

ModuleNotFoundError: Module not found: Error: Can't resolve 'react/jsx-runtime' in '/vercel/path0/pages'  

このようなエラー。

Reactのバージョンアップが必要

Reactのランタイムでエラーが起きているということで、
React自体のバージョンアップが必要だと予測が付きます。

変更前 package.json
"react": "^16.13.1",  

現状のReactバージョンは16.13.1です。

React17系にアップデート

変更後 package.json
"react": "^17.0.2",  

package.jsonを変更し、
モジュール更新します。

$ npm update  

すると正常に動き出しました。

まとめ : Next.js11へのバージョンアップはReactの更新も必要でした

記事の内容をまとめます。

こんな感じです。
Next.jsのアップデートの更新頻度が早く、
もたもたしていると、アプデに余計なコストが掛かります。

できるだけ最新バージョンを維持して
ブログを運営していきたいところです。


フォローすると UIデザイナー力の上がるTwitter やってます!
今日から使えるテクニックを発信中。
ぜひフォローしてみてください!
👉フォローはこちら!

最後まで読んでいただきありがとうございました!
すばらしいNext.jsライフをお過ごしください。

期間限定 最大95%オフセール
効率UPメガバンドル開催中!最大95%オフ!!!
期間 : 11月1日午後15時59分まで
オススメ記事
検証環境