Next.js 14.2

投稿者: Delba de Oliveira @ delba_oliveira
Tim Neutkens @ timneutkens

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

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

今すぐアップグレードするか、以下で開始してください：

npx create-next-app@latest

開発用Turbopack（Release Candidate）

過去数ヶ月間、私たちはTurbopackによるローカル開発パフォーマンスの改善に取り組んできました。バージョン14.2では、Turbopack Release Candidateがローカル開発で利用可能になりました：

• 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とApp Routerの両方）の全体的なビルドと本番パフォーマンスの改善に取り組みました。

Tree-shaking

ServerとClient Componentsの境界での最適化を特定し、未使用のエクスポートのtree-shakingを可能にしました。例えば、"use client"を持つファイルから単一のIconコンポーネントをインポートしても、そのパッケージの他のすべてのアイコンが含まれることはありません。

これにより、本番JavaScriptバンドルサイズを大幅に削減できます。react-aria-componentsのような人気ライブラリでこの最適化をテストしたところ、最終バンドルサイズが-51.3%削減されました。

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

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

ビルドメモリ使用量

非常に大規模なNext.jsアプリケーションでは、本番ビルド中にメモリ不足クラッシュ（OOM）が発生することがありました。ユーザーレポートと再現を調査した結果、根本的な問題は過度なバンドリングとミニフィケーション（Next.jsが重複を含むより少ない、より大きなJavaScriptファイルを作成）であることが判明しました。

バンドリングロジックをリファクタリングし、これらのケースに対してコンパイラを最適化しました。初期テストでは、最小限のNext.jsアプリで、メモリ使用量とキャッシュファイルサイズが平均2.2GBから190MB未満に減少しました。

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

CSS

ページ間をナビゲートする際のスタイルの競合を避けるため、CSSをチャンク化することで、本番Next.jsビルド中のCSSの最適化方法を更新しました。CSSチャンクの順序とマージは、インポート順序によって定義されるようになりました。

例えば、base-button.module.cssはpage.module.cssより前に順序付けされます：

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

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

正しいCSS順序を維持するため、以下を推奨します：

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

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

キャッシュの改善

キャッシュは、高速で信頼性の高いWebアプリケーションを構築する上で重要な部分です。ミューテーションを実行する際、ユーザーと開発者の両方が、最新の変更を反映するためにキャッシュが更新されることを期待します。

App RouterでのNext.jsキャッシュエクスペリエンスの改善方法を検討してきました。

staleTimes（実験的）

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

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

デフォルトでは、プリフェッチされたルート（prefetchプロパティなしの<Link>コンポーネントを使用）は30秒間キャッシュされ、prefetchプロパティがtrueに設定されている場合は5分間キャッシュされます。

next.config.jsでカスタム再検証時間を定義することで、これらのデフォルト値を上書きできます：

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

module.exports = nextConfig;

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

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

Parallel and Intercepting Routes

Parallel and Intercepting Routesの反復を続けており、現在はClient-side Router Cacheとの統合を改善しています。

revalidatePathまたはrevalidateTagでServer Actionsを呼び出すParallel and Intercepting routesは、ユーザーの現在のビューを維持しながらキャッシュを再検証し、表示されるスロットを更新します。

同様に、router.refreshを呼び出すと、現在のビューを維持しながら表示されるスロットが正しく更新されます。

エラーDXの改善

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

例えば、Reactハイドレーションエラーは、コミュニティでよくある混乱の原因です。ハイドレーションミスマッチの原因を特定するのに役立つ改善を行いましたが、Reactチームと協力して基礎となるエラーメッセージを改善し、エラーが発生したファイル名を表示するよう取り組んでいます。

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

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

React 19

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

React canaryチャネルからNext.js内で利用可能だったActionsとその関連フックなどの新機能は、すべてのReactアプリケーション（クライアントのみのアプリケーションを含む）で利用可能になります。

Reactエコシステムでのこれらの機能のより広範な採用を楽しみにしています。

その他の改善

• [Docs] Video Optimizationに関する新しいドキュメント（PR）
• [Docs] instrumentation.tsに関する新しいドキュメント（PR）
• [Feature] next/imageの新しいoverrideSrcプロパティ（PR）
• [Feature] getStaticPropsの新しいrevalidateReason引数（PR）
• [Improvement] ストリーミングロジックのリファクタリング、本番環境でのページストリーミング時間の短縮（PR）
• [Improvement] ネストされたServer Actionsのサポート（PR）
• [Improvement] 生成されたSitemapsでのローカライゼーションサポート（PR）
• [Improvement] 開発およびビルドログの視覚的改善（PR）
• [Improvement] VercelでのSkew protectionが安定版に（Docs）
• [Improvement] useSelectedLayoutSegmentをPages Routerと互換性を持たせる（PR）
• [Improvement] 絶対URLを解決する必要がない場合のmetadataBase警告をスキップ（PR）
• [Improvement] Vercelにデプロイ時にJavaScriptが無効でもServer Actionsが送信されない問題を修正（PR）
• [Improvement] 参照ページから離れた後やアクティブでないparallel routeセグメント内で使用された場合のServer Actionがactionsマニフェストで見つからないエラーを修正（PR）
• [Improvement] next/dynamicで読み込まれるコンポーネントのCSSインポートを修正（PR）
• [Improvement] アニメーション画像にunoptimizedプロパティがない場合の警告（PR）
• [Improvement] 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の皆様に心から感謝いたします！