Next.js の Ver.11 で発表された新機能を１分で読めるまとめ

１分でわかる変更点

• すぐ使える嬉しい変更点
  • next/image => 面倒だった width と height から解放！
  • Conformance => 実装が UX 的に良いか ESLint と統合して確認できるように！
  • Script Optimization => 外部の JS ファイルのパフォーマンスを調整可能に！
• 使う人を選びそうな変更点
  • Next.js Live => みんなでリアルタイムに開発しよう！
  • CRA Migration => create react app ユーザーからの移行を楽に！
• 後ろ側の変更点
  • Improved Performance => 開発者体験さらに上がったよ！
  • Webpack 5 => Webpack 4 から 5 がデフォルトに！

すぐ使える嬉しい変更点

next/image

• Automatic Size Detection が追加され、width と height の指定が不要になった（嬉しすぎる）
• Image Placeholders が追加され、placeholder として Blur のかかったサイズの小さい画像をオプションでセットできるようになった（Gatsby の Image にあって欲しかった機能）

Conformance

• 日本語で規格適合性という意味
• ユーザーエクスペリエンス（UX）として良い実装になっているか npx next lint のように ESLint に統合されて確認できる
• 文法は守っているが UX を考えると不備がある点に指摘が入るため、husky などの pre-commit に入れておくと、より質の高い実装へと強制できる

Script Optimization

• 外部から <script> タグで *.js を読み込んでいる場合、<Script> コンポーネントが用意され、優先度をつけられるようになった
• beforeInteractive > afterInterractive (default) > lazyOnload と strategy がオプションとして選択できる

使う人を選びそうな変更点

Next.js Live

• 開発者のための昨日で、ブラウザ上でリアルタイムにコーディングしながら機能開発ができる
• 今まで必要であれば Visual Studio Code の Live Share 機能を使っているが、現状ではこれもそこまで使っていないため、みなさんからの感想待ち

CRA Migration

• create react app の頭文字で、create next-app で始めていない React ユーザーから Next.js への移行を支援
• 私は Next.js ユーザーのため関係ないが、React 教えてから Next.js 教えるパターンでは使えそう...?

後ろ側の変更点

Improved Performance

• 開発者体験 (DX) に対しての言及
• Ver.10.1 や Ver.10.2 で高速化していたところに、さらに Babel 関連の最適化を加えている
• 開発者は特に何も変更せずに利用できる

Webpack 5

• Webpack が Ver.4 がデフォルトだったところから Ver.5 へ変更
• これまで 3,400 を超える既存プロジェクトで Webpack 5 への移行を進めてきた経験が説得力
• バージョンの違いによる恩恵が明確にわかっていないため、今のところ関係ないが Ver.5 を使っていく

おわりに