DocsDigest
一覧へLanguage: EN
OpenAINext.js2023/09/19 18:00

Next.js 13.5

要点だけを先に読めるように短く再構成したセクションです。

元記事
OpenAIClaude

Quick Digest

要約

要点だけを先に読めるように短く再構成したセクションです。

openaijamodel: gpt-5-mini-2025-08-07

Next.js 13.5 のリリースハイライト

next.jsperformanceimagehmroptimize-package-importsapp-router

Key Points

  • 起動22%高速化
  • 自動パッケージ最適化
  • next/imageでアート指向対応

Summary

Next.js 13.5 はローカル開発の速度と信頼性、プロダクションのコールドスタート改善に注力したリリースです。App Router の最適化、パッケージ自動最適化（optimizePackageImports）、および next/image のアートディレクション対応などを含み、開発者の反復速度と本番パフォーマンスが向上します。

Key Points

  • ローカルサーバー起動が約22%高速化、HMR（Fast Refresh）が約29%高速化、メモリ使用量が最大約40%削減。
  • optimizePackageImports により @mui/icons-material、lodash、date-fns、@heroicons/react などの大規模ライブラリの不要なモジュール読み込みを自動最適化し、開発更新とコールドスタートを高速化。
  • next/image に実験的 API unstable_getImgProps() を追加。<picture> やダークモード、canvas、background-image と連携したアートディレクションが可能に。placeholder で data:image/ を使う非ぼかしプレースホルダもサポート。
  • 438件以上のバグ修正と多くの改善（HTTPS 開発モード、Yarn PnP、Bun サポート、Middleware 内 cookies()/headers()、Server Actions の安定化など）。

Practical notes for engineers

  • まずローカル環境で next dev を動かし、起動時間・HMR・メモリ挙動を確認してください。
  • 大きなアイコン／コンポーネントライブラリを使っている場合は、バンドルサイズと初回ロードを計測して自動最適化の効果を確認。
  • next/image の高度なユースケース（<picture> や canvas、ダークモード切替）には unstable_getImgProps() を検討。実験的 API のためライブラリ依存や将来互換性に注意。
  • アップグレード例：npm i next@latest react@latest react-dom@latest eslint-config-next@latest。CI とステージングでの検証を推奨。

Full Translation

翻訳

原文の流れを保ったまま読める翻訳セクションです。

openaijamodel: gpt-5-mini-2025-08-07

Next.js 13.5 リリース

Next.js 13.5

公開日: 2023-09-19T18:00:00.000Z

投稿者: Jimmy Lai (@feedthejim), Tim Neutkens (@timneutkens), Tobias Koppers (@wSokra)

Next.js 13.5 はローカル開発のパフォーマンスと信頼性を改善します。主な改善点は次の通りです：

  • 22% 高速なローカルサーバー起動: App Router と Pages Router の反復がより高速に
  • 29% 高速な HMR (Fast Refresh): 変更保存時の反復が高速化
  • 40% 少ないメモリ使用量: next start 実行時に測定
  • 最適化されたパッケージインポート: 人気のあるアイコン・コンポーネントライブラリ使用時の更新が高速化
  • next/image の改善: <picture>、アートディレクション、およびダークモード対応

さらに、438 件以上のバグ修正を含みます。今すぐアップグレードして、Next.js Conf（10/26）に登録してください:

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

起動時間と Fast Refresh の改善

App Router の採用は引き続き進んでおり、HTTP Archive がクロールした上位 1,000 万のオリジンで月次 80% 増加しています。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 がさらに多くの機能をサポートします。

Optimized Package Imports

大規模なアイコン/コンポーネントライブラリや多くのモジュールを再エクスポートする依存関係を使用する際、パッケージインポートを最適化するブレイクスルーを導入しました。これにより、ローカル開発のパフォーマンスとプロダクションのコールドスタートが改善されます。

以前は modularizeImports をサポートしており、どのようにインポートを解決するかを設定する必要がありました。13.5 ではこれを置き換える optimizePackageImports を導入し、マッピングを指定することなく自動でインポートを最適化します。

現在自動最適化されるライブラリの例:

  • @mui/icons-material
  • @mui/material
  • date-fns
  • lodash, lodash-es
  • ramda
  • react-bootstrap
  • @headlessui/react
  • @heroicons/react
  • lucide-react

これらは、実際に使用しているモジュールのみをロードするようになり、many named exports を使った便利なインポート方法を維持します。

PR を参照するか、ドキュメントで optimizePackageImports を確認してください。

next/image の改善

コミュニティのフィードバックに基づき、unstable_getImgProps() という新しい実験的関数を追加しました。これにより <Image> コンポーネントを直接使わずに高度なユースケースをサポートできます。例として以下が可能です：

  • 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/ を受け付けるようになりました（demo）。詳しくはドキュメントの next/image を参照してください。

その他の改善点（13.4.0 以降）

13.4.0 以降で修正された 438 件以上のバグと各種改善の主な一覧:

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

コントリビューター

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

（その他多くの個人コントリビューターによる貢献）