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

本ブログで使用しているNext.jsのバージョンは9.5.4です。
最新バージョンは11系です。

バージョンをジャンプさせると大変そうなので、
まずは着実に9系から10系にアップデートしてみたいと思います。

10系の最初の安定版10.0.1にアップデートしました。
そのときに発生したトラブル共有です。

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

package.json(アプデ前)

before : package.jsonの抜粋
"dependencies": {  
    "next": "^9.5.4",  
    "react": "^16.13.1",  
}

Next.jsは9.5.4、
Reactは16.13.1を使用中です。

npmで更新

package.json変更点
"dependencies": {  
    "next": "^10.0.1",  

Next.jsのバージョンを10.0.1に変更。

$ npm update  

npm updateを実行して、
Next.jsモジュールを更新します。

ローカルサーバーを再起動
$ npm run dev  

完了したらサーバーを起動して、
localhost:3000へアクセス。

babelがなくてエラー

Error: Cannot find module '@babel/core'  

「babel/coreモジュールが無い」
というエラーです。

babelモジュールのインストール
$ npm install --save-dev @babel/core @babel/preset-env  

正常にサイトが表示されるように鳴りました。

最終的なpackage.json(変更点)

after : package.jsonの抜粋
"dependencies": {  
    "next": "^10.0.1",  
    "react": "^16.13.1",  
    ~~~省略~~~  
},  
"devDependencies": {  
    "@babel/core": "^7.15.4",  
    "@babel/preset-env": "^7.15.4",  
    ~~~省略~~~  
}

今回はbabelが存在しなかったのが原因でした。
Next.jsのバージョンは頻繁に上がっているため、
できる限り最新状態を保てるように追いついていこうと思います。

とりあえず、次は11系にアップグレードに挑戦です。

オススメ記事
検証環境