ゲームエンジニアの雑記ブログ

ゲームエンジニアの雑記ブログ。テーマ自由、技術について解説します

Next.js11へのバージョンアップはReactの更新も必要

Next.js11へのバージョンアップはReactの更新も必要

こんにちは、エンジニアのオオバです。

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

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

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

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

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

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

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

→11万文字で徹底解説した「DOTweenの教科書」Unityアニメーションの超効率化ツールはこちら

'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を11系にアップデート
  • Reactを17系にアップデート
  • React16系ではランタイムエラーが起きる

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

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

「Unity初心者大学」というUnity初心者向けのYouTube始めました!!
ぜひチャンネル登録をお願いします!

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

オススメ記事
検証環境
  • react v17.0.2
  • next v11.1.2