Next.js 11について

先週、Next.js11がリリースされましたね。
この日はNext.jsのボイラープレートのPRを出した後、自分もオンラインカンファレンスに参加してリリース発表の動画をリアルタイムで見ていました。

今回Next.js11になって変更点がどのようになったのかをざっくりと記事にしたいと思います。

fast refreshの強化

コーディング中に自動でブラウザ反映するfast refreshの速度が改善されリアルタイム性があがっています
特に今回のバージョンでは開発者側のエクスペリエンスの向上がフォーカスされているようです。

develop preview shipのリリース

develop preview shipがリリースされた
ブラウザ上で画面とコード共有できる機能でこちらはVercelのサービスになります。実際に使ってみるとよいと思います。

先ほど書いたように開発者のエクスペリエンス向上のためにもこういった機能が使えるようになりました。
特にこのご時世、リモートワークが増えている時期なのでVercel側は開発者への配慮に注力しているのかもしれません。
前回もECommerceをサポートし出したのも、このご時世を見てのことだったと思われます。

Imageコンポーネントのパフォーマンス向上

imageコンポーネントをさらにパフォーマンスよくしています
デバイスごとにImageコンポーネントの画像サイズを自動的に変更や圧縮してくれる機能が追加されています。

ESLintサポート

nextがESLintと統合して標準でESLintを扱えるようになりました。
11からはnext lintコマンドが使用できます。

その他変更点

11から廃止された機能がいくつかあったり、既存プロジェクトでは一部修正が必要になるものもでてくると思います。
例えば、router.eventsは取り扱いが少し変更されており、useEffect内で実行しなくてはいけないなど。
11に上げるときは少し注意が必要です。

まとめ

今回総合的にみるとNext.jsのパフォーマンス改善と開発者の体験向上が良くなっています。

個人的にはvercelの囲い込み商売の匂いがしはじめていて今後もVercelに依存す機能は増えていくと予想しており、実際にISRがいい例かなと思っています。
9や10ほど大きな仕様変更はないですが、React開発は今後もNext.js一択だと思います。

変更点について公式のドキュメントに記載されていているのでこちらを確認。

https://nextjs.org/docs/upgrading

関連記事