Next.js 14.2

Next.js 14.2には、開発環境、本番環境、およびキャッシュの改善が含まれています。

• 開発用Turbopack（リリース候補版）: next dev --turbo で99.8%のテストを通過
• ビルドと本番環境の改善: ビルド時のメモリ使用量削減とCSS最適化
• キャッシュの改善: staleTimesによる設定可能な無効化期間
• エラーDXの改善: ハイドレーションミスマッチエラーの改善とデザイン更新

今すぐアップグレードするか、以下で新規プロジェクトを作成できます:

npx create-next-app@latest

開発用Turbopack（リリース候補版）

過去数ヶ月間、私たちはTurbopackを使用したローカル開発環境のパフォーマンス改善に取り組んできました。バージョン14.2では、ローカル開発用のTurbopackリリース候補版が利用可能になりました:

• 統合テストの**99.8%**を通過
• Next.jsアプリケーションで使用される上位300のnpmパッケージがTurbopackでコンパイル可能であることを確認
• すべてのNext.jsサンプルがTurbopackで動作
• Rustで書かれた高速なCSSバンドラー/ミニファイアであるLightning CSSを統合

私たちはVercelのアプリケーションでTurbopackを広範囲にテストしてきました。例えば大規模なNext.jsアプリケーションであるvercel.comでは以下の結果が得られました:

• ローカルサーバー起動時間が最大76.7%高速化
• Fast Refreshによるコード更新が最大96.3%高速化
• キャッシュなしの初期ルートコンパイルが最大45.8%高速化（Turbopackにはまだディスクキャッシュ機能がありません）

Turbopackは引き続きオプトイン機能であり、以下のコマンドで試すことができます:

next dev --turbo

今後はメモリ使用量の改善、永続キャッシュの実装、next build --turboに注力していきます。

• メモリ使用量 - メモリ使用量を調査するための低レベルツールを開発しました。パフォーマンスメトリクスと広範なメモリ使用情報を含むトレースファイル生成が可能になりました
• 永続キャッシュ - 最適なアーキテクチャオプションを検討中で、今後のリリースで詳細を共有予定
• next build - Turbopackはまだビルドには利用できませんが、**74.7%**のテストを通過しています。進捗はareweturboyet.com/buildで確認可能

Turbopackのサポート機能と未サポート機能の一覧については、ドキュメントを参照してください。

ビルドと本番環境の改善

Turbopackによるバンドリング改善に加え、すべてのNext.jsアプリケーション（Pages RouterとApp Routerの両方）のビルドおよび本番環境パフォーマンスを向上させました。

ツリーシェイキング

サーバーコンポーネントとクライアントコンポーネントの境界における最適化を実装し、未使用のエクスポートをツリーシェイクできるようになりました。例えば"use client"を含むファイルから単一のIconコンポーネントをインポートする場合、そのパッケージの他のアイコンが含まれなくなりました。これにより本番JavaScriptバンドルサイズを大幅に削減できます。

この最適化をreact-aria-componentsのような人気ライブラリでテストしたところ、最終バンドルサイズが**-51.3%**減少しました。

注: この最適化は現在バレルファイルでは動作しません。当面はoptimizePackageImports設定オプションを使用できます:

module.exports = {
  experimental: {
    optimizePackageImports: ['package-name'],
  },
};

ビルド時のメモリ使用量

超大規模なNext.jsアプリケーションでは、本番ビルド中にメモリ不足（OOM）クラッシュが発生するケースがありました。ユーザー報告と再現調査の結果、過剰なバンドリングとミニフィケーション（重複を含むより少ない大きなJavaScriptファイルの生成）が根本原因であることを特定しました。この問題に対処するため、バンドリングロジックをリファクタリングし、コンパイラを最適化しました。

最小限のNext.jsアプリでの初期テストでは、メモリ使用量とキャッシュファイルサイズが平均2.2GBから190MB未満に減少しました。

メモリパフォーマンスのデバッグを容易にするため、next buildに--experimental-debug-memory-usageフラグを追加しました。詳細はドキュメントをご覧ください。

CSS

本番ビルド時のCSS最適化方法を更新し、ページ間遷移時のスタイル競合を防ぐためCSSをチャンク分割するようにしました。

CSSチャンクの順序とマージはインポート順で定義されるようになりました。例えばbase-button.module.cssはpage.module.cssより前に順序付けられます:

import styles from './base-button.module.css';
 
export function BaseButton() {
  return <button className={styles.primary} />;
}

import { BaseButton } from './base-button';
import styles from './page.module.css';
 
export function Page() {
  return <BaseButton className={styles.primary} />;
}

正しいCSS順序を維持するため、以下をお勧めします:

• グローバルスタイルよりもCSS Modulesを使用する
• CSSモジュールは単一のJS/TSファイルでのみインポートする
• グローバルクラス名を使用する場合、グローバルスタイルも同じJS/TSファイルでインポートする

この変更がほとんどのアプリケーションに悪影響を与えることはないと考えていますが、アップグレード後に予期しないスタイルが発生した場合は、ドキュメントの推奨事項に従ってCSSインポート順序を確認してください。

キャッシュの改善

キャッシュは高速で信頼性の高いWebアプリケーション構築の重要な要素です。変更を行う際、ユーザーも開発者もキャッシュが最新の変更を反映することを期待します。私たちはApp RouterでのNext.jsキャッシュ体験を改善する方法を模索してきました。

staleTimes（実験的機能）

クライアントサイドルーターキャッシュは、訪問済みおよびプリフェッチされたルートをクライアント側にキャッシュすることで高速なナビゲーション体験を提供するキャッシュレイヤーです。

コミュニティからのフィードバックに基づき、クライアントサイドルーターキャッシュの無効化期間を設定可能にする実験的staleTimesオプションを追加しました。

デフォルトでは、プリフェッチされたルート（prefetchプロップなしの<Link>コンポーネント使用）は30秒間キャッシュされ、prefetchプロップがtrueに設定されている場合は5分間キャッシュされます。next.config.jsでカスタム再検証時間を定義することでこれらのデフォルト値を上書きできます:

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
      static: 180,
    },
  },
};
 
module.exports = nextConfig;

staleTimesはキャッシュヒューリスティックをより制御したいユーザーの現在の体験を改善することを目的としていますが、完全な解決策ではありません。今後のリリースでは、全体的なキャッシュセマンティクスの改善とより柔軟なソリューションの提供に注力します。

staleTimesの詳細についてはドキュメントをご覧ください。

並列ルート (Parallel Routes) とインターセプトルート (Intercepting Routes)

現在、並列ルート (Parallel Routes) と インターセプトルート (Intercepting Routes) の改善を継続しており、クライアントサイドルーターキャッシュ (Client-side Router Cache) との統合を強化しています。

• revalidatePath または revalidateTag を使用してサーバーアクション (Server Actions) を呼び出す並列ルートとインターセプトルートは、キャッシュを再検証し、ユーザーの現在のビューを維持しながら表示スロットを更新します。
• 同様に、router.refresh を呼び出すと、現在のビューを維持しながら表示スロットが正しく更新されます。

エラーDXの改善 (Errors DX Improvements)

バージョン14.1では、next dev 実行時の エラーメッセージとスタックトレースの可読性向上 に取り組み始めました。この取り組みは14.2でも継続され、より優れたエラーメッセージ、App RouterとPages Routerの両方に対するオーバーレイデザインの改善、ライト/ダークモードのサポート、より明確な dev および build ログが含まれるようになりました。

例えば、Reactハイドレーションエラー (React Hydration errors) はコミュニティで混乱を招きやすい問題です。ハイドレーションの不一致の原因を特定するための改善（下記参照）を行いつつ、Reactチームと協力して基礎となるエラーメッセージを改善し、エラーが発生したファイル名を表示するようにしています。

改善前:

バージョン14.2以前のNext.jsエラーオーバーレイの例

改善後:

バージョン14.2以降のNext.jsエラーオーバーレイの例

React 19

2月にReactチームは React 19 のリリースを発表しました。React 19に備えて、Next.jsに最新の機能と改善を統合する作業を行っており、これらの変更を調整するメジャーバージョンのリリースを計画しています。

Reactカナリーチャンネル (React canary channel) からNext.jsで利用可能だったアクション (Actions) と関連するフックなどの新機能は、すべてのReactアプリケーション（クライアントのみのアプリケーションを含む）で利用可能になります。Reactエコシステムでこれらの機能が広く採用されることを楽しみにしています。

その他の改善点 (Other Improvements)

• [ドキュメント] 動画最適化 (Video Optimization) に関する新しいドキュメント (PR)
• [ドキュメント] instrumentation.ts に関する新しいドキュメント (PR)
• [機能] next/image に新しい overrideSrc プロパティを追加 (PR)
• [機能] getStaticProps に新しい revalidateReason 引数を追加 (PR)
• [改善] ストリーミングロジックをリファクタリングし、本番環境でのページストリーミング時間を短縮 (PR)
• [改善] ネストされたサーバーアクション (Server Actions) のサポート (PR)
• [改善] 生成されたサイトマップ (Sitemaps) でのローカライゼーションサポート (PR)
• [改善] devおよびbuildログの視覚的改善 (PR)
• [改善] Vercelでのスキュー保護 (Skew protection) が安定版に (Docs)
• [改善] useSelectedLayoutSegment をPages Routerと互換性を持たせる (PR)
• [改善] 絶対URLを解決する必要がない場合の metadataBase 警告をスキップ (PR)
• [改善] Vercelにデプロイ時にJavaScriptが無効な状態でもサーバーアクションが送信されない問題を修正 (PR)
• [改善] 参照ページから離れた後や非アクティブな並列ルートセグメント内で使用された場合にサーバーアクションが見つからないというエラーを修正 (PR)
• [改善] next/dynamic で読み込まれるコンポーネント内のCSSインポートを修正 (PR)
• [改善] アニメーション画像に unoptimized プロパティがない場合に警告を表示 (PR)
• [改善] images.loaderFile がデフォルト関数をエクスポートしていない場合にエラーメッセージを表示 (PR)

コミュニティ (Community)

Next.jsは現在、月間100万人以上のアクティブ開発者を擁しています。コミュニティのサポートと貢献に感謝しています。GitHub Discussions、Reddit、Discord で会話に参加してください。

貢献者 (Contributors)

Next.jsは、3,000人以上の個人開発者、GoogleやMetaなどの業界パートナー、そしてVercelのコアチームの共同作業の結果です。このリリースは以下の方々によってもたらされました:

• Next.jsチーム: Andrew, Balazs, Ethan, Janka, Jiachi, Jimmy, JJ, Josh, Sam, Sebastian, Sebbie, Shu, Steven, Tim, Wyatt, Zack
• Turbopackチーム: Donny, Leah, Maia, OJ, Tobias, Will
• Next.jsドキュメントチーム: Delba, Steph, Michael, Anthony, Lee

@taishikato、@JesseKoldewijn、@Evavic44、@feugy、@liamlaverty、@dvoytenko、@SukkaW、@wbinnssmith、@rishabhpoddar、@better-salmon、@ziyafenn、@A7med3bdulBaset、@jasonuc、@yossydev、@Prachi-meon、@InfiniteCodeMonkeys、@ForsakenHarmony、@miketimmerman、@kwonoj、@williamli、@gnoff、@jsteele-stripe、@chungweileong94、@WITS、@sogoagain、@junioryono、@eisafaqiri、@yannbolliger、@aramikuto、@rocketman-21、@kenji-webdev、@michaelpeterswa、@Dannymx、@vpaflah、@zeevo、@chrisweb、@stefangeneralao、@tknickman、@Kikobeats、@ubinatus、@code-haseeb、@hmmChase、@byhow、@DanielRivers、@wojtekmaj、@paramoshkinandrew、@OMikkel、@theitaliandev、@oliviertassinari、@Ishaan2053、@Sandeep-Mani、@alyahmedaly、@Lezzio、@devjiwonchoi、@juliusmarminge、@szmazhr、@eddiejaoude、@itz-Me-Pj、@AndersDJohnson、@gentamura、@tills13、@dijonmusters、@SaiGanesh21、@vordgi、@ryota-murakami、@tszhong0411、@officialrajdeepsingh、@alexpuertasr、@AkifumiSato、@Jonas-PFX、@icyJoseph、@florian-lp、@pbzona、@erfanium、@remcohaszing、@bernardobelchior、@willashe、@kevinmitch14、@smakosh、@mnjongerius、@asobirov、@theoholl、@suu3、@ArianHamdi、@adrianha、@Sina-Abf、@kuzeykose、@meenie、@nphmuller、@javivelasco、@belgattitude、@Svetoslav99、@johnslemmer、@colbyfayock、@mehranmf31、@m-nakamura145、@ryo8000、@aryaemami59、@bestlyg、@jinsoul75、@petrovmiroslav、@nattui、@zhuyedev、@dongwonnn、@nhducit、@flotwig、@Schmavery、@abhinaypandey02、@rvetere、@coffeecupjapan、@cjimmy、@Soheiljafarnejad、@jantimon、@zengspr、@wesbos、@neomad1337、@MaxLeiter、@devr77 の皆さん、ご協力ありがとうございました！