Next.js 13.5まとめ
基本的には以下のNext.js 13.5のブログを翻訳してまとめたものになります。
TL;DR
ローカル開発環境のパフォーマンスと信頼性の改善がメインです。
- ローカルサーバーの起動が22%高速化: App & Pagesルーターでの反復作業が高速化
- HMR(Fast Refresh)が29%高速化: 変更保存時の反復作業が高速化
- メモリ使用量を40%削減:
next start動作時に測定 - パッケージインポートの最適化: 人気のあるアイコンやコンポーネントライブリ使用時の更新が高速化
-
next/imageの改善:<picture>とアートディレクション、ダークモードに対応 - 438を超えるバグの修正
アップデート詳細
起動とFast Refesh時間の改善
HTTPアーカイブによってクロールされた上位100万（Next.js 13.5のブログでは10 millionと書かれていますが、画像は1 millionなのでそちらを採用）のモバイルWebサイトでNext.js v13を採用しているサイトのうち、Appルーターの継続的な採用が前月比80%伸びています。
Pagesルーターに対するAppルーターの採用比率は約7%で、母集団がNext.js v13にアップデートしているサイトなので、全体で見るともう少し下がりそうです。
出典: https://nextjs.org/blog/next-13-5#improving-startup-and-fast-refresh-time
Next.js 13.4以降、Appルーターを採用しているアプリケーション向けのパフォーマンスと信頼性の改善にフォーカスしてきています。新しいアプリケーションで以下のような改善があります。
- ローカルサーバーの起動が22%高速化
- HMR(Fast Refresh)が29%高速化
- メモリ使用量を40%削減
パッケージインポートの最適化
何百、何千ものモジュールを再エクスポートする大規模なアイコンやコンポーネントライブラリ、その他の依存を使用する場合、パッケージインポートを最適化し、ローカル開発環境のパフォーマンスと本番環境のコールドスタートの両方を改善する画期的な進歩を遂げました。
以前、modularizeImportsの対応を追加し、これらのライブラリを使用する場合にどのようにインポートが解決されるべきかを設定できるようにしました。13.5では、このオプションにoptimizePackageImportsを追加し、それによってインポートのマッピングを指定する必要がなくなり、自動的に最適化してくれるようになります。
mui/icons-materialや@mui/material、date-fns、lodash、lodash-es、ramda、react-bootstrap、@headlessui/react、@heroicons/react、lucide-reactのようなライブラリが自動的に最適化され、多くの名前付きエクスポートを含むインポート文を書く利便性を維持しながら、実際に使用するモジュールだけが読み込まれるようになります。
詳細は以下のPRとドキュメントで確認できます。
next/imageの改善
コミュニティからのフィードバックに基づき、<Image>コンポーネントを直接使用しない高度なユースケースに対応するために新しい実験的な関数unstable_getImgProps()を追加しました。
- background-imageやimage-setと一緒に動作する
- キャンバスのcontext.drawImage()や
new Image()と一緒に動作する - アートディレクションを実装するためのpictureタグのメディアクエリやライト/ダークモードの画像と一緒に動作する
import { unstable_getImgProps as getImgProps } from 'next/image';
export default function Page() {
const common = { alt: 'Hero', width: 800, height: 400 };
const {
props: { srcSet: dark },
} = getImgProps({ ...common, src: '/dark.png' });
const {
props: { srcSet: light, ...rest },
} = getImgProps({ ...common, src: '/light.png' });
return (
<picture>
<source media="(prefers-color-scheme: dark)" srcSet={dark} />
<source media="(prefers-color-scheme: light)" srcSet={light} />
<img {...rest} />
</picture>
);
}
さらに、placeholderプロパティはぼかすべきではないプレースホルダー画像向けの任意のdata:image/を提供することに対応します（デモ）。
詳細は以下のドキュメントで確認できます。
その他のいくつかの改善
13.4.0以降、438を超えるバグを修正し、以下のような様々な改善がなされました。
Discussion