こんにちは、エンジニアのオオバです。
本ブログで使用している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系にアップグレードに挑戦です。
この記事が気に入ったらフォローしよう
オススメ記事
検証環境
- Next.js v10.0.1