Next.js 13.5

投稿者: Jimmy Lai @ feedthejim, Tim Neutkens @ timneutkens, Tobias Koppers @ wSokra
公開日: 2023年9月19日（火）

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

• 22%高速化されたローカルサーバー起動: App RouterとPages Routerでより高速な反復開発
• 29%高速化されたHMR（Fast Refresh）: 変更保存時のより高速な反復処理
• 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%高速化されたローカルサーバー起動
• 29%高速化されたHMR（Fast Refresh）
• 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での作業
• canvas 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（ドキュメント）
• MiddlewareとEdge Runtime内でのDraft Modeサポート
• Middleware内でのcookies()とheaders()サポート
• Metadata APIでTwitterカードのsummary_large_imageサポート
• next/navigationからRedirectTypeをエクスポート
• Playwright用実験的テストモード追加（ドキュメント）

改善

• next startを1062%多くのリクエスト/秒を処理するようにリファクタリング
• コールドスタートを改善するためのNext.js内部最適化（最大40%高速化、Vercelでテスト）
• App Router用のより良いJestサポート（PR）
• next dev出力の再設計（PR）
• Server Actionsが完全に静的なルートで動作（ISRでのデータ再検証を含む）
• Server Actionsがルート間のナビゲーションをブロックしなくなった
• Server Actionsが複数の同時アクションをトリガーできなくなった
• redirect()を呼び出すServer Actionsが、戻るボタンが動作するように現在のエントリを置き換える代わりに履歴スタックにプッシュ
• Server Actionsがブラウザキャッシュを防ぐためにno-cache, no-storeキャッシュ制御ヘッダーを追加
• ナビゲーション後に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が利用できない問題を修正
• サポートされていない機能でStatic Exportを使用する際のエラーメッセージ改善
• 再帰的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