OpenAINext.js2024/10/21 17:00

Next.js 15

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

元記事

Quick Digest

要約

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

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

Next.js 15 リリース概要

Key Points

  • React 19対応
  • 非同期Request API(破壊的)
  • キャッシュ既定値の変更

Summary

Next.js 15 が正式リリースされ、安定性改善と複数の新機能・破壊的変更が導入されました。主要な変更は非同期 Request API への移行、キャッシュ既定値の変更、React 19 対応、Turbopack の安定化です。エンジニア向けに移行と検証ポイントを簡潔にまとめます。

Key Points

  • アップグレード手順: まず npx @next/codemod@canary upgrade latest を実行して自動変換を試し、手動アップデートは npm install next@latest react@rc react-dom@rc を利用。
  • 非同期 Request API(破壊的変更): cookies, headers, draftMode, params(layout.js / page.js / route.js / default.js / generateMetadata / generateViewport)および searchParams(page.js)が非同期化。移行用 codemod: npx @next/codemod@canary next-async-request-api。一時的に同期アクセスは可能だが警告が出る。
  • キャッシュ挙動の変更: GET Route Handlers とクライアントルータのページキャッシュがデフォルトで未キャッシュに。以前の挙動を維持するには export const dynamic = 'force-static'experimental.staleTimes を next.config で設定。
  • React 19 対応: App Router は React 19 RC を使用。Pages Router は React 18 と互換を維持(同一アプリで両方を混在させるのは推奨されない)。
  • 開発体験改善: next dev --turbo(Turbopack Dev)が安定化し起動・Fast Refresh・初回コンパイルが大幅に高速化。Hydration エラー表示がソース付きで改善。
  • 新 API と改善点: unstable_after(レスポンス後の非同期処理、experimental)、instrumentation.js(サーバー可観測性、stable)、Static Route Indicator、React Compiler(experimental)、next/formnext.config.ts の TypeScript サポート、ESLint 9 対応、外部パッケージのバンドル設定など。
  • 推奨移行フロー: 1) codemod を実行、2) 重点的にルートハンドラ・キャッシュ関連・hydration をテスト、3) 本番ロールアウト。詳細はアップグレードガイドと Next.js Conf を参照してください。

Full Translation

翻訳

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

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

Next.js 15

Next.js 15 の主な変更点

Next.js 15 は以下を導入しています。

主なポイント

  • React 19 のサポート
    • Next.js 15 は React 19 をサポートします。既存のアプリは互換性を確認の上でアップグレードしてください。
  • キャッシュの改善
    • ビルドおよびランタイムキャッシュの改善により、パフォーマンスとビルド時間の改善が期待できます。
  • Turbopack の開発モードでの安定リリース
    • Turbopack が development(開発モード)で安定版として提供されます。開発環境での高速なバンドリングを利用できます。
  • 新しい API
    • 開発者向けの新しい API が追加され、拡張性とカスタマイズが向上します。
  • その他
    • 小さな改善やバグ修正も含まれています。

詳細は公式リリースノートやドキュメントをご確認ください。