DocsDigest
Back to listLanguage: JA
OpenAINext.jsSep 19, 2023, 6:00 PM

Next.js 13.5

A condensed section focused on the key takeaways first.

Original Post
OpenAIClaude

Quick Digest

Summary

A condensed section focused on the key takeaways first.

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

Next.js 13.5

nextjsperformancehot-reloadimage-optimizationpackage-importsturbopackbug-fixes

Key Points

  • 22% faster local server startup
  • optimizePackageImports auto-optimizes large libs
  • unstable_getImgProps enables picture/art-direction

Summary

Next.js 13.5 focuses on local development performance, reliability, and image handling. Key measured wins vs 13.4: 22% faster local server startup, 29% faster HMR (Fast Refresh), and ~40% less memory usage for next start. The release also introduces automatic package import optimization for large libraries, new image APIs for art direction/dark mode, and 438+ bug fixes and quality-of-life improvements.

Key Points

  • Performance: 22% faster dev server startup, 29% faster HMR, ~40% reduced memory for production start. Improvements come from caching, cheaper filesystem ops, incremental tree traversal, and lazyizing blocking calls.
  • optimizePackageImports: automatic optimization for large icon/component libraries (e.g. @mui/*, lodash, date-fns, heroicons, lucide-react). No manual modularizeImports mappings required—only the modules actually used are loaded, speeding up dev updates and cold starts.
  • next/image updates: new experimental unstable_getImgProps() to support <picture>, art direction, dark mode, background-image/canvas use cases. placeholder now accepts data:image/ values for non-blurred placeholders.
  • Other notable changes: HTTPS dev support (next dev --experimental-https), Yarn PnP and Bun project support, cookies().has(), IPv6 hostname support, router/link scroll=false, Server Actions improvements, and a refactor of next start that handles far more requests/sec and improves cold-start times (up to ~40% on Vercel).
  • Stability: 438+ bugs fixed across routers, middleware, image preloading, dev cache races, metadata, CSP nonces, and more.

Upgrade

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

Actionable notes for engineers

  • You can remove manual modularizeImports mappings if you relied on them for large libraries—optimizePackageImports runs automatically in 13.5.
  • Try next dev --turbo to benefit from expanded Turbopack support in dev.
  • If you need art-directed or dark-mode images outside the <Image> component, evaluate unstable_getImgProps() for creating <picture> or canvas-based workflows.

Full Translation

Translations

A translation section that keeps the flow of the original article.

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

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