【マイグレーション】TypeScriptを使用したNext.js 6からNext.js 7へ移行した時行った対応について

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Next.jsはReactベースでSSRなどの設定が大変な部分をまとめてやってくれるフレーム枠です。
前回7月にNext.js 5からNext.js 6へ移行し手から早くも Next.js7
がリリースされました。
変更点としては内包しているWebpackのバージョンがへ4、Babelが7へ
アップグレードされたりとコードが最適化されました。
今回は Next.js7
への
マイグレーションのログとして内容をまとめました。
前回の記事 https://t-cr.jp/article/3261645b902aa1216
環境
- React 16.4.1
- Next.js 6.1.1
- typescript 2.9.2
まずパッケージのバージョンをあげてみました。
terminal$ yarn upgrade --latest react react-dom next typescript
packageのバージョン
- react@16.4.1 → react@16.5.2
- react-dom@16.4.1 → react-dom@16.5.2
- next@6.1.1 → next@7.0.0
- typescript@2.9.2 → typescript@3.0.3
早速エラーが・・・。
swiftError: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
at Chunk.get (/Users/hoge/project/node_modules/webpack/lib/Chunk.js:824:9)
at /Users/hoge/project/node_modules/extract-text-webpack-plugin/dist/index.js:176:48
at Array.forEach (<anonymous>)
at /Users/hoge/project/node_modules/extract-text-webpack-plugin/dist/index.js:171:18
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/hoge/project/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
at AsyncSeriesHook.lazyCompileHook (/Users/hoge/project/node_modules/webpack/node_modules/tapable/lib/Hook.js:154:20)
at Compilation.seal (/Users/hoge/project/node_modules/webpack/lib/Compilation.js:1214:27)
at hooks.make.callAsync.err (/Users/hoge/project/node_modules/webpack/lib/Compiler.js:547:17)
at _done (eval at create (/Users/hoge/project/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
at _err2 (eval at create (/Users/hoge/project/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:50:22)
at Promise.all.then (/Users/hoge/project/node_modules/webpack/lib/DynamicEntryPlugin.js:73:20)
at process._tickCallback (internal/process/next_tick.js:68:7)
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
at Chunk.get (/Users/hoge/project/node_modules/webpack/lib/Chunk.js:824:9)
at /Users/hoge/project/node_modules/extract-text-webpack-plugin/dist/index.js:176:48
at Array.forEach (<anonymous>)
at /Users/hoge/project/node_modules/extract-text-webpack-plugin/dist/index.js:171:18
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/hoge/project/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
at AsyncSeriesHook.lazyCompileHook (/Users/hoge/project/node_modules/webpack/node_modules/tapable/lib/Hook.js:154:20)
at Compilation.seal (/Users/hoge/project/node_modules/webpack/lib/Compilation.js:1214:27)
at hooks.make.callAsync.err (/Users/hoge/project/node_modules/webpack/lib/Compiler.js:547:17)
at _done (eval at create (/Users/hoge/project/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
at _err2 (eval at create (/Users/hoge/project/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:50:22)
at Promise.all.then (/Users/hoge/project/node_modules/webpack/lib/DynamicEntryPlugin.js:73:20)
at process._tickCallback (internal/process/next_tick.js:68:7)
そのため他のパッケージのバージョンもあげました。
terminal$ yarn upgrade --latest next-redux-wrapper @zeit/next-typescript @zeit/next-css @types/next
packageのバージョン
- next-redux-wrapper@2.0.0-beta.6 → next-redux-wrapper@2.0.0
- @zeit/next-typescript@1.1.0 → @zeit/next-typescript@1.1.1
- @zeit/next-css@0.2.0 → @zeit/next-css@1.0.1
- @types/next@6.0.3 → @types/next@6.1.8
すると無事動作しました。
今回はコードの修正はなくパッケージのアップデートで解決できました。
- article
shadcn/ui × Next.js:モダンな UI を爆速構築する方法
- article
Next.js の Image コンポーネント徹底攻略:最適化・レスポンシブ・外部 CDN 対応
- article
NextJS で始める Web アプリケーションの多言語・国際化対応の方法
- article
【徹底解説】Next.js での SSG・SSR・ISR の違いと使い分け
- article
shadcn/ui とは?Next.js 開発を加速する最強 UI ライブラリ徹底解説
- article
Cursor で Next.js 開発を加速!プロジェクト立ち上げからデプロイまで
- article
TypeScript と RxJS を組み合わせたリアクティブプログラミング完全ガイド
- article
Remix × TypeScript:型安全なフルスタック開発
- article
Vitest × TypeScript:型安全なテストの始め方
- article
TypeScript で進化する非同期ストリーム処理:AsyncIterator と型安全なデータフロー設計
- article
Svelte × TypeScript:型安全な開発スタイル
- article
TypeScript で管理する環境変数:型安全な env スキーマ設計入門
- article
NestJS でのモジュール設計パターン:アプリをスケーラブルに保つ方法
- article
Vitest で React コンポーネントをテストする方法
- article
Nginx 入門:5 分でわかる高速 Web サーバーの基本と強み
- article
WordPress 入門:5 分で立ち上げる最新サイト構築ガイド
- article
【実践】Zod の union・discriminatedUnion を使った柔軟な型定義
- article
Node.js × FFmpeg でサムネイル自動生成:キーフレーム抽出とスプライト化
- blog
Googleストアから訂正案内!Pixel 10ポイント有効期限「1年」表示は誤りだった
- blog
【2025年8月】Googleストア「ストアポイント」は1年表記はミス?2年ルールとの整合性を検証
- blog
Googleストアの注文キャンセルはなぜ起きる?Pixel 10購入前に知るべき注意点
- blog
Pixcel 10シリーズの発表!全モデル Pixcel 9 から進化したポイントを見やすく整理
- blog
フロントエンドエンジニアの成長戦略:コーチングで最速スキルアップする方法
- blog
失敗を称賛する文化はどう作る?アジャイルな組織へ生まれ変わるための第一歩
- review
今の自分に満足していますか?『持たざる者の逆襲 まだ何者でもない君へ』溝口勇児
- review
ついに語られた業界の裏側!『フジテレビの正体』堀江貴文が描くテレビ局の本当の姿
- review
愛する勇気を持てば人生が変わる!『幸せになる勇気』岸見一郎・古賀史健のアドラー実践編で真の幸福を手に入れる
- review
週末を変えれば年収も変わる!『世界の一流は「休日」に何をしているのか』越川慎司の一流週末メソッド
- review
新しい自分に会いに行こう!『自分の変え方』村岡大樹の認知科学コーチングで人生リセット
- review
科学革命から AI 時代へ!『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来