Next.js 13.5

Next.js 13.5では、ローカル開発環境のパフォーマンスと信頼性が向上しました：

• ローカルサーバー起動が22%高速化: App RouterとPages Routerでより高速に反復開発
• HMR（Fast Refresh）が29%高速化: 変更保存時の反復処理がより高速に
• メモリ使用量が40%削減: next start実行時の計測値
• パッケージインポートの最適化: 人気のアイコンライブラリやコンポーネントライブラリ使用時の更新が高速化
• next/imageの改善: <picture>タグ、アートディレクション、ダークモード対応
• 438以上のバグ修正!

今すぐアップグレードして、10月26日のNext.js Confに登録しましょう：

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

サーバー起動とFast Refreshの高速化

App Routerの採用が継続的に増加しており、HTTP Archiveがクロールしたトップ1000万オリジンにおいて月間80%の成長を見せています。

Next.js 13.4以降、私たちはApp Routerアプリケーションのパフォーマンスと信頼性向上に注力してきました。13.4と13.5を比較すると、新規アプリケーションで以下の改善が見られました：

• ローカルサーバー起動が22%高速化
• HMR（Fast Refresh）が29%高速化
• メモリ使用量が40%削減

これらのパフォーマンス向上は、以下のような最適化によって実現されました：

• 遅い操作をキャッシュまたは最小化することで作業量を削減
• 高コストなファイルシステム操作の最適化
• コンパイル時の増分ツリートラバーサルの改善
• 不要な同期ブロッキング呼び出しの遅延化
• 大規模アイコンライブラリの自動設定

Next.jsユーザーのLattice社は、テスト環境で87-92%のコンパイル速度向上を報告しています。

現在のバンドラー性能の改善を継続する一方で、さらなるパフォーマンス向上のためにTurbopack（ベータ）の開発も並行して進めています。13.5では、next dev --turboがより多くの機能をサポートするようになりました。

パッケージインポートの最適化

大規模なアイコンやコンポーネントライブラリ、または数百・数千のモジュールを再エクスポートする依存関係を使用する際の、ローカル開発環境のパフォーマンスとプロダクション環境のコールドスタートを改善するための画期的な最適化を実現しました。

以前は、modularizeImportsを導入し、これらのライブラリ使用時のインポート解決方法を設定できるようにしていました。13.5では、このオプションをoptimizePackageImportsで置き換え、インポートマッピングを指定する必要なく、自動的にインポートを最適化します。

@mui/icons-material、@mui/material、date-fns、lodash、lodash-es、ramda、react-bootstrap、@headlessui/react、@heroicons/react、lucide-reactなどのライブラリは、実際に使用するモジュールのみをロードするように自動最適化されつつ、多くの名前付きエクスポートを含むimport文を書く便利さはそのまま維持されます。

PRを確認するか、ドキュメントで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/を指定できるようになりました（デモ）。

ドキュメントでnext/imageについて詳しく学べます。

その他の改善点

13.4.0以降、438以上のバグ修正と様々な改善が行われました：

• [ドキュメント] フォームとミューテーションに関する新しいドキュメント
• [ドキュメント] サーバーコンポーネントとクライアントコンポーネントに関する新しいドキュメント
• [ドキュメント] コンテンツセキュリティポリシーとNonceに関する新しいドキュメント
• [ドキュメント] キャッシングと再検証に関する新しいドキュメント
• [機能] next/navigationのuseParamsとuseSearchParamsがPages Routerで動作するようになり、段階的な移行が可能に
• [機能] router.push / router.replaceでscroll: falseをサポート
• [機能] next/linkでscroll={false}をサポート
• [機能] 開発用HTTPSサポート：next dev --experimental-https
• [機能] cookies().has()のサポート追加（ドキュメント）
• [機能] IPv6ホスト名のサポート追加
• [機能] App RouterでYarn PnPをサポート
• [機能] サーバーアクション内でredirect()を使用可能に
• [機能] Bunを使用したプロジェクト作成をサポート：bunx create-next-app（ドキュメント）
• [機能] ミドルウェアとEdge Runtime内でDraft Modeをサポート
• [機能] ミドルウェア内でcookies()とheaders()を使用可能に
• [機能] メタデータAPIがTwitterカードでsummary_large_imageをサポート
• [機能] next/navigationからRedirectTypeをエクスポート
• [機能] Playwright用の実験的テストモードを追加（ドキュメント）
• [改善] next startをリファクタリングし、1062%多くのリクエスト/秒を処理可能に
• [改善] Next.js内部を最適化し、コールドスタートを改善（Vercelでテスト時、最大40%高速化）
• [改善] App Router向けのJestサポートを強化（PR）
• [改善] next devの出力を再設計（PR）
• [改善] サーバーアクションが完全に静的なルート（ISRによるデータ再検証を含む）で動作するように
• [改善] サーバーアクションがルート間のナビゲーションをブロックしなくなりました
• [改善] サーバーアクションが複数の同時アクションをトリガーできなくなりました
• [改善] redirect()を呼び出すサーバーアクションが、戻るボタンが機能するように、現在のエントリを置換するのではなく履歴スタックにプッシュするようになりました
• [改善] サーバーアクションがブラウザキャッシュを防ぐためにno-cache, no-storeのcache-controlヘッダーを追加
• [改善] ナビゲーション後にサーバーアクションが2回呼び出されるバグを修正
• [改善] サーバーコンポーネントでのEmotion CSSサポートを改善
• [改善] ハッシュURL変更時のscroll-behavior: smoothをサポート
• [改善] すべてのブラウザでArray.prototype.atのポリフィルを追加
• [改善] 複数の並列リクエストを処理する際のnext devキャッシュの競合状態を修正
• [改善] コンソールのfetch出力で、cache: SKIPでキャッシュをスキップしたリクエストを表示
• [改善] usePathnameが正しくbasePathを取り除くようになりました
• [改善] next/imageがApp Routerで画像を正しくプリロードするようになりました
• [改善] not-foundがルートレイアウトを二重にレンダリングしなくなりました
• [改善] NextRequestをクローン可能に（例：new NextRequest(request)）
• [改善] /childrenリテラルルートでapp/children/page.tsxが正しく動作するようになりました
• [改善] コンテンツセキュリティポリシーが事前初期化スクリプトのnonceをサポート
• [改善] next/navigationのredirectがbasePathをサポート
• [改善] output: 'standalone'モードでレンダリング中にprocess.envが利用できない問題を修正
• [改善] 静的エクスポートでサポートされていない機能を使用した際のエラーメッセージを改善
• [改善] 再帰的readdir実装を改善（約3倍高速化）
• [改善] 動的ルートセグメントでfallback: falseを使用した際にリクエストがハングする問題を修正
• [改善] 再検証リクエストにsignalが渡され、リクエストが既に中止されている場合に失敗するエラーを修正
• [改善] next dev実行時に不要なリロードを防ぐため、404ページでのfetchポーリングを削除し、WebSocketイベントを優先
• [改善] performance.measureがハイドレーションミスマッチを引き起こさなくなりました
• [改善] pages/_appを編集した際に予期しないフルリロードが発生するケースを修正
• [改善] ImageResponseが型チェックを改善するためResponseを拡張（PR）
• [改善] next buildでpages出力がない場合にpagesが表示されなくなりました
• [改善] <Link>でskipTrailingSlashRedirectが無視される問題を修正
• [改善] 開発モードでの動的メタデータルートの重複を修正

コントリビューター

Next.jsは、2,800人以上の個人開発者、GoogleやMetaなどの業界パートナー、そしてVercelのコアチームの共同作業の成果です。GitHub Discussions、Reddit、Discordでコミュニティに参加しましょう。

このリリースは以下の方々によってもたらされました：

• Next.jsチーム: Andrew, Balazs, Jiachi, Jimmy, JJ, Josh, Sebastian, Shu, Steven, Tim, Wyatt, Zack
• Turbopackチーム: Donny, Justin, Leah, Maia, OJ, Tobias, Will

そして以下のコントリビューターの方々: @opnay, @vinaykulk621, @goguda, @coreyleelarson, @bencmbrook, @cramforce, @williamli, @stefanprobst, @feugy, @Kikobeats, @dvoytenko, @MaxLeiter, @devjiwonchoi, @lacymorrow, @kylemcd, @tibi1220, @iamarpitpatidar, @pythagoras-yamamoto, @alexkirsz, @jsteele-stripe, @tknickman, @gaojude, @janicklas-ralph, @ericfennis, @JohnAdib, @MiLk, @delbaoliveira, @leerob, @LuudJanssen, @lucasconstantino, @davecarlson, @colinhacks, @jantimon, @Banbarashik, @ForsakenHarmony, @arturbien, @gnoff, @hsrvms, @DuCanhGH, @tim-hanssen, @Aryan9592, @rishabhpoddar, @Lantianyou, @joulev, @AkifumiSato, @trigaten, @HurSungYun, @DevLab2425, @SukkaW, @daniel-web-developer, @ky1ejs, @wyattjoh, @ShaunFerris, @syedtaqi95, @Heidar-An, @Jeffrey-Zutt, @Ryan-Dia, @steppefox, @hiro0218, @rjsdnql123, @fgiuliani, @steven-tey, @AntoineBourin, @adamrhunter, @darshanjain-entrepreneur, @s0h311, @djreillo, @dijonmusters, @cassidoo, @anonrig, @gfgabrielfranca, @Bitbbot, @BrennanColberg, @Nick-Mazuk, @thomasballinger, @lucgagan, @nroland013, @SonMooSans, @jenewland1999, @thorwebdev, @jyunhanlin, @Gnadhi, @yagogmaisp, @carlos-menezes, @ryo-manba, @vamcs, @matepapp, @SleeplessOne1917, @ecklf, @karlhorky, @starunaway, @FernandVEYRIER, @Terro216, @anthonyshew, @suhaotian, @simonswiss, @feikerwu, @lubakravche, @masnormen, @bottxiang, @mhmdrioaf, @tyler-lutz, @vincenthongzy, @yigithanyucedag, @doinki, @danger-ahead, @bre30kra69cs, @Yash-Singh1, @krmeda, @bigyanse, @2-NOW, @Mingyu-Song, @morganfeeney, @aralroca, @nickmccurdy, @adamjmcgrath, @angel1254mc, @cxa, @ibash, @mohanraj-r, @kevinmitch14, @iaurg, @steebchen, @Cow258, @charlesbdudley, @tyhopp, @Drblessing, @milovangudelj, @jacobsfletch, @JoshuaKGoldberg, @zignis, @ChristianIvicevic, @mrxbox98, @oliviertassinari, @fsansalvadore, @tvthatsme, @dvakatsiienko, @brunoeduardodev, @sonam-serchan, @vicsantizo, @leodr, @wiscaksono, @hustLer2k, @joshuabaker, @shozibabbas, @omarhoumz, @jamespearson, @tristndev, @AldeonMoriak, @manovotny, @mirismaili, @SuttonJack, @jeremydouglas, @JanCizmar, @mltsy, @WilderDev, @Guilleo03, @Willem-Jaap, @escwxyz, @wiredacorn, @Ethan-Arrowood, @BaffinLee, @greatSumini, @ciruz, @kijikunnn, @DustinsCode, @riqwan, @joostdecock, @nikolovlazar, @Bowens20832, @JohnAlbin, @gidgudgod, @maxproske, @dunklesToast, @yyuemii, @mPaella, @mknichel, @niko20, @mkcy3, @valentinpolitov, @smaeda-ks, @keyz, @Schniz, @koba04, @jiwooIncludeJeong, @ethanmick, @didemkkaslan, @itsmingjie, @v1k1, @thepatrick00, @taylorbryant, @kvnang, @alainkaiser, @simPod, @svarunid, @pauek, @lycuid, @MarkAtOmniux, @darshkpatel, @johnta0, @devagrawal09, @ibrahemid, @JesseKoldewijn, @javivelasco, @05lazy, @alexanderbluhm, @Fonger, @souporserious, @DevEsteves, @sanjaiyan-dev, @g12i, @cesarkohl, @josh, @li-jia-nan, @gabschne, @akd-io, @runjuu, @jocarrd, @nnnnoel, @ferdingler, @ikryvorotenko