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

 2021/06/15
Next.js の Ver.11 で発表された新機能を1分で読めるまとめ

1分でわかる変更点

日本時間で本日発表された Next.js の Ver.11 ですが、これまでの Ver.10 で開発していた私目線でまとめてみました。
  • すぐ使える嬉しい変更点
    • next/image => 面倒だった widthheight から解放!
    • 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 が追加され、widthheight の指定が不要になった(嬉しすぎる)
  • Image Placeholders が追加され、placeholder として Blur のかかったサイズの小さい画像をオプションでセットできるようになった(Gatsby の Image にあって欲しかった機能)

Conformance

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

Script Optimization

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

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

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 を使っていく

おわりに

ユーザー目線では、派手な機能追加はなかった印象の Next.js Ver.11 ですが、開発者体験という観点では痒いところに手が届いた大きなアップデートだと感じています。
個人的にはこれまでの next/image が Gatsby と比べて違うなぁと感じていたところが完全に解消されて最高です。
また、少し言及されていますが、React は Ver.17 を現状ではベースとしているため、話題になっていた Ver.18 での Strict Mode (?) などの考慮は現状では不要のようです。
すでに、最新版の配布が始まっているため、これを読んでいただいた方は既存プロジェクトを Next.js Ver.11 へアップグレードしてみましょう。
今回紹介したそれぞれの項目をコードも踏まえて詳しく知りたい方は、英語で良ければ Blog -Next.js 11 | Vercel で確認してみましょう。
今回も最後までお読みいただき、ありがとうございました。
株式会社キカガク 代表取締役会長
吉崎 亮介
twitter: @yoshizaki_91

\ 次期受講生募集中 /

経営から技術まですべての力を手に入れたいあなたへ

【次期受講生募集】経営から技術まで仲間と一緒にすべての力を手に入れたいあなたへ

『起業家精神 × 学び方改革』が起こす行動の劇的な変化!
キカガク創業者の吉崎が考える新しい起業家育成の環境。
スキルばかり磨いて変わらない現実を変えていきましょう!