Next.js 12 の新機能や破壊的変更についてざっとまとめてみました！

はじめに

kimizuy です。Next.js のバージョン 12 が発表されましたね。

なかなか canary の定期アップデートから正式アップデートがされないなーと思ってはいましたがカンファレンスでのサプライズを予定していたようです。

Next.js 12 is our biggest release ever

とあるように大きめの変更があったようなので、本記事では Next 12 の変更点について簡単にまとめて紹介します。

参考

• Next.js ブログ

新機能

• SWC をベースに Rust コンパイラを採用し、ローカル開発での反映速度を最大 3 倍、ビルドの速度を最大 5 倍に
• middleware という機能が追加。ユーザーのリクエストが完了する前に実行できる
• React 18 の suspence などの新機能に備えた対応を追加。フラグを追加することで試すこともできる
• <Image> が AVIF 画像フォーマットをサポート。画像容量を WebP より 20% 小さくできる
• ISR のフォールバックが Web クローラーに最適化
• ES モジュールのサポートと URL から直接モジュールをインポートできる実験的なサポートを追加
• React Server Components（アルファ版）の追加

破壊的変更

• Webpack4 を正式に削除
• next.config.js で target 指定が不要に
• next/image はラッパー要素が div から span に変更
• ネイティブ ESM 対応のため Node.js の最小バージョンが変更され 12.0.0 から 12.22.0 に

個人的に注目している機能

Rust コンパイラ

既にプロジェクト上に Babel の設定が存在する場合は Rust コンパイラによる処理は回避されます。CSS-in-JS ライブラリでは Babel が必須ですが、今のところネイティブ対応できているのは Next.js にビルトインされている styled-jsx のみです。Next では SWC に他の CSS-in-JS ライブラリを対応させるためにユーザーから Babel の設定を募っています。

middleware

実際の動作をイメージしにく人はカンファレンスの動画を見るとわかりやすいです。

動画では、ユーザーの居住地国に応じて、国別にディスカウント情報を表示する E コマースサイトでのデモを行っています。
日本のユーザーに対して日本用のディスカウント情報を表示しようとした場合、オリジンサーバー（デモでは UK）へリクエストが発生し応答に大きく時間がかかってしまいます。そこで middleware を介してリクエストの内容を書き換えることで Edge 上でキャッシュされた情報を返し、遅延なしで画面の情報を更新しています。

Note: 動画でも紹介されていますが、Vercel の Edge サーバーは CDN と似ていますが静的なコンテンツだけでなく動的なデータ処理も可能にしたものです

React Server Components

コンポーネントをサーバー上でレンダリングしその結果をクライアントに返します。サーバー上のレンダリングと異なるのは React Server Components を使用することでクライアント側の JavaScript が不要になることです。

先ほど上記で紹介した動画の後半にデモがあります。SSR では HTML が生成されて返却されるまで何も表示されません。それに対して React Server Components はコンポーネントレベルでデータフェッチが完了した HTML が順次表示されています。

また、コンポーネントレベルでのサーバーレンダリングが可能になることで getServerSideProps や getStaticProps も不要になります。

おわりに

ざっと Next 12 の内容をご紹介しました。Rust コンパイラや React 18 など「もう少し様子見してからでもいいのでは？」という機能を先行してどんどん取り入れてくれて面白いですね。

以上、ありがとうございました。