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の両方）の全体的なビルドおよび本番パフォーマンスの向上にも取り組みました。

ツリーシェイキング

サーバーコンポーネントとクライアントコンポーネントの境界で、未使用のexportsをツリーシェイキングできる最適化を特定しました。たとえば、"use client"を持つファイルから単一のIconコンポーネントをインポートしても、そのパッケージの他のすべてのアイコンが含まれなくなりました。これにより、本番環境のJavaScriptバンドルサイズを大幅に削減できます。

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

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

next.config.ts

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

ビルド時のメモリ使用量

非常に大規模なNext.jsアプリケーションでは、本番ビルド中にメモリ不足クラッシュ（OOM）が発生することに気づきました。ユーザーレポートと再現を調査した結果、根本的な問題は過剰なバンドルとミニファイ（Next.jsが重複したより少なく、より大きなJavaScriptファイルを生成していた）にあることが判明しました。これらのケースのために、バンドルロジックをリファクタリングし、コンパイラを最適化しました。

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

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

CSS

本番環境のNext.jsビルド中に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モジュールをグローバルスタイルよりも優先して使用する。
• CSSモジュールは単一のJS/TSファイルにのみインポートする。
• グローバルクラス名を使用する場合は、グローバルスタイルも同じJS/TSにインポートする。

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

キャッシュの改善

キャッシュは、高速で信頼性の高いウェブアプリケーションを構築する上で非常に重要です。変更を行う際、ユーザーと開発者の両方が、最新の変更を反映するようにキャッシュが更新されることを期待しています。App RouterにおけるNext.jsのキャッシュエクスペリエンスを改善する方法を模索してきました。

staleTimes (実験的)

クライアントサイドルーターキャッシュは、クライアント上で訪問済みおよびプリフェッチされたルートをキャッシュすることで、高速なナビゲーションエクスペリエンスを提供するように設計されたキャッシュ層です。

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

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

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

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

staleTimesの詳細については、ドキュメントを参照してください。

並列ルートとインターセプトルート

引き続き並列ルートとインターセプトルートの改良を進めており、現在はクライアントサイドのルーターキャッシュとの統合を改善しています。

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

エラーDXの改善

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

例えば、Reactのハイドレーションエラーは、私たちのコミュニティでよく混乱の原因となります。私たちはユーザーがハイドレーションの不一致の原因を特定するのに役立つ改善を行いましたが（以下参照）、根本的なエラーメッセージを改善し、エラーが発生したファイル名を表示するためにReactチームと協力しています。

Before

After

React 19

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

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

その他の改善点

• [ドキュメント] 動画最適化に関する新規ドキュメント（PR）。
• [ドキュメント] instrumentation.tsに関する新規ドキュメント（PR）
• [機能] next/imageに新しいoverrideSrcプロパティを追加（PR）。
• [機能] getStaticPropsに新しいrevalidateReason引数を追加（PR）。
• [改善] ストリーミングロジックをリファクタリングし、本番環境でのページストリーミング時間を削減（PR）。
• [改善] ネストされたServer Actionsのサポート（PR）。
• [改善] 生成されたサイトマップのローカライズのサポート（PR）。
• [改善] 開発およびビルドログの視覚的改善（PR）
• [改善] スキュー保護がVercelで安定化（ドキュメント）。
• [改善] useSelectedLayoutSegmentをPages Routerと互換性を持たせる（PR）。
• [改善] 絶対URLの解決が不要な場合のmetadataBase警告をスキップ（PR）。
• [改善] Vercelにデプロイされた際にJavaScriptが有効になっていない場合、Server Actionsが送信されない問題を修正（PR）
• [改善] 参照ページから移動した後、または非アクティブな並列ルートセグメント内で使用された場合に、アクションマニフェストにServer Actionが見つからないというエラーを修正（PR）
• [改善] next/dynamicでロードされたコンポーネントにおけるCSSインポートを修正（PR）。
• [改善] アニメーション画像にunoptimizedプロパティがない場合に警告を表示（PR）。
• [改善] images.loaderFileがデフォルト関数をエクスポートしていない場合にエラーメッセージを表示（PR）

コミュニティ

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

貢献者

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 Docs：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に心から感謝します！