コンテンツにスキップ
ブログに戻る

2023年9月19日火曜日

Next.js 13.5

投稿者
Jimmy Lai
Jimmy Lai@feedthejim
Tim Neutkens
Tim Neutkens@timneutkens
Tobias Koppers
Tobias Koppers@wSokra

Next.js 13.5 は、ローカル開発のパフォーマンスと信頼性を向上させます。

本日アップグレードして、Next.js Conf 10月26日開催の登録をしてください

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

起動時間とFast Refresh時間の改善

App Router の継続的な採用を嬉しく思っています。HTTP Archive がクロールした上位1000万オリジンを見ると、月間80%成長しています。

2023 CRuX Dataset for Top 1 Million Mobile Sites on the Web

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件以上のバグを修正し、様々な改善を行いました。これには以下が含まれます。

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

コントリビューター

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

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

そして、@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 による貢献。