Next.js 11

Summary

Next.js 11 が公開されました。主な改善は Google の Conformance による品質ガイドライン統合、開発時の起動時間改善（Babel-loader の最適化）、サードパーティスクリプトの優先度管理を行う next/script、next/image の自動サイズ検出とぼかしプレースホルダー、そして Webpack 5 の全体デフォルト化です。Create React App からの移行支援ツールやブラウザ上での共同編集プレビュー（Next.js Live）も導入されています。

Key Points

• アップグレードコマンド: npm i next@latest react@latest react-dom@latest
• ESLint 統合: npx next lint で Next.js 向けルールを自動生成し開発中にフレームワーク固有の問題を検出
• スクリプト最適化: next/script の strategy（beforeInteractive, afterInteractive, lazyOnload）で読み込み優先度を制御。デフォルトは afterInteractive（defer 相当）に変更
• 画像改善: ローカル画像を import すると自動で width/height が設定され、placeholder='blur' と blurDataURL で CLS と表示のちらつきを低減
• ビルド基盤: Webpack 5 が全アプリでデフォルト。カスタム webpack がある場合はアップグレードガイドを確認
• CRA 移行: npx @next/codemod cra-to-next（実験的）で pages ディレクトリ追加や CSS 移動を自動化
• 互換性: minimum React バージョンが 17.0.2 に更新。破壊的変更は限定的だがアップグレードガイドを確認

Quick Actions

• まずは最新版へアップグレード: npm i next@latest react@latest react-dom@latest
• ESLint を実行して既存プロジェクトの問題を把握: npx next lint
• CRA から移行を試す（実験的）: npx @next/codemod cra-to-next
• 詳細や互換性は公式アップグレードガイドとドキュメントを参照してください。