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の改善

HTTP Archiveがクロールした上位1000万のオリジンを見ると、App Routerの導入が月間80%の成長を続けていることに感激していますHTTP Archive。

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

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

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

• キャッシュを利用したり、遅い操作を最小限に抑えることで作業量を削減
• コストのかかるファイルシステム操作を最適化
• コンパイル中のインクリメンタルツリートラバーサルの改善
• 不要なブロッキング同期呼び出しを遅延実行に移行
• 大規模なアイコンライブラリの自動設定

Next.jsユーザーのLatticeは、テストで87〜92%のコンパイル高速化を報告しました。

現在のバンドラーパフォーマンスの改善を継続すると同時に、さらなるパフォーマンス向上を目指してTurbopack (Beta) の開発も並行して進めています。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を超えるバグを修正し、以下を含む様々な改善を行いました。

• [ドキュメント] フォームとミューテーションに関する新しいドキュメント
• [ドキュメント] サーバーおよびクライアントコンポーネントに関する新しいドキュメント
• [ドキュメント] Content Security Policy と Noncesに関する新しいドキュメント
• [ドキュメント] キャッシュおよび再検証に関する新しいドキュメント
• [機能] 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のサポートを追加
• [機能] Server Actionsでの redirect() のサポートを追加
• [機能] Bunを使用したプロジェクト作成のサポートを追加: bunx create-next-app (ドキュメント)
• [機能] ミドルウェアとEdge Runtime内でのDraft Modeのサポート
• [機能] cookies() と headers() がミドルウェア内でサポートされるようになりました。
• [機能] Metadata API がTwitterカードで summary_large_image をサポートするようになりました。
• [機能] RedirectType が next/navigation からエクスポートされるようになりました。
• [機能] Playwrightの実験的なテストモードを追加 (ドキュメント)
• [改善] next start をリファクタリングし、1秒あたりのリクエスト処理数を1062%向上させました。
• [改善] Next.jsの内部を最適化し、コールドスタートを改善（Vercelでテスト済み、最大40%高速化）
• [改善] App RouterのJestサポートの向上 (PR)
• [改善] next dev の出力デザインを刷新 (PR)
• [改善] Server Actionsが完全な静的ルートで動作するようになりました（ISRによるデータの再検証も含む）。
• [改善] Server Actionsがルート間のナビゲーションをブロックしなくなりました。
• [改善] Server Actionsが複数の同時アクションをトリガーできなくなりました。
• [改善] Server Actionsで redirect() を呼び出すと、現在のエントリを置き換えるのではなく履歴スタックにプッシュされるようになり、戻るボタンが機能するようになりました。
• [改善] Server Actionsがブラウザのキャッシュを防ぐために no-cache, no-store cache-control ヘッダーを追加するようになりました。
• [改善] ナビゲーション後にServer Actionsが2回呼び出される可能性があったバグを修正しました。
• [改善] Server ComponentsでのEmotion CSSのサポートを改善
• [改善] ハッシュURLの変更に対する scroll-behavior: smooth のサポート
• [改善] すべてのブラウザでArray.prototype.atのポリフィルを追加
• [改善] next dev のキャッシュにおける複数の並行リクエスト処理時の競合状態を修正しました。
• [改善] コンソールの fetch 出力に、cache: SKIP でキャッシュをスキップしたリクエストが表示されるようになりました。
• [改善] usePathname が basePath を正しく取り除くようになりました。
• [改善] next/image がApp Routerで画像を正しくプリロードするようになりました。
• [改善] not-found がルートレイアウトを2回レンダリングしなくなりました。
• [改善] NextRequest がクローンできるようになりました (例: new NextRequest(request))。
• [改善] app/children/page.tsx がリテラルな /children ルートで正しく動作するようになりました。
• [改善] Content Security Policy がプリ初期化スクリプトの 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, and @ikryvorotenko