【マイグレーション】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
Next.jsの開発中に発生する Warning: Prop `className` did not match. Server: Client: ...の解決策
- article
Next.jsとEdge Runtimeを組み合わせて超爆速サーバーレス表示を実現する方法
- article
Next.jsでSEO対策を強化するための5つのポイント + アンチパターンの回避策
- article
Next.js × Suspenseを活用した非同期ルーティング体験を実現する方法
- article
next/image vs 外部CDNを徹底比較!Next.js画像最適化戦略を考えてみた
- article
Next.js 「App Router」と「Pages Router」の違いと移行のコツ
- blog
技術的負債とどう向き合う?フロントエンドチームが事業成長と両立させるための現実的なロードマップ戦略
- blog
「目標設定、何書けば…」を解決!フロントエンドエンジニアのための OKR/MBO 具体的活用事例
- blog
もう「目標倒れ」しない!フロントエンドチームが達成感を得られる目標設定と進捗管理のコツ
- blog
メンバーの強みを引き出す!フロントエンドリーダーが行うべき「フィードバック」と「コーチング」の違い
- blog
1on1 が劇的に変わる!フロントエンドエンジニアの成長を加速させる「問いかけ」の技術
- blog
メンバーの主体性を引き出す!フロントエンドリーダーが実践する「任せる」勇気と仕組みづくり
- review
人生が激変!『苦しかったときの話をしようか』森岡毅著で発見した、本当に幸せなキャリアの築き方
- review
もう「何言ってるの?」とは言わせない!『バナナの魅力を 100 文字で伝えてください』柿内尚文著 で今日からあなたも伝え方の達人!
- review
もう時間に追われない!『エッセンシャル思考』グレッグ・マキューンで本当に重要なことを見抜く!
- review
プロダクト開発の悩みを一刀両断!『プロダクトマネジメントのすべて』及川 卓也, 曽根原 春樹, 小城 久美子
- review
ビジネスも人生も攻略!『行動経済学が最強の学問である』の衝撃
- review
神メンタル 「心が強い人」の人生は思い通り 星 渉