Next.js 13.5まとめ

基本的には以下のNext.js 13.5のブログを翻訳してまとめたものになります。
https://nextjs.org/blog/next-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とドキュメントで確認できます。
https://github.com/vercel/next.js/pull/54695
https://nextjs.org/docs/app/api-reference/next-config-js/optimizePackageImports

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/を提供することに対応します（デモ）。

詳細は以下のドキュメントで確認できます。
https://nextjs.org/docs/app/building-your-application/optimizing/images

その他のいくつかの改善

13.4.0以降、438を超えるバグを修正し、以下のような様々な改善がなされました。
https://nextjs.org/blog/next-13-5#other-improvements