Next.js App Router の更新

App Router は、Next.js の未来に向けた新たな基盤となるものですが、体験をより良くする機会があることも認識しています。現在の優先事項について最新情報をお伝えしたいと思います。

今後の Next.js のリリースでは、以下の領域に注力しています

• パフォーマンスの向上
• 安定性の向上
• 開発者教育の向上

App Router

まず、App Router がどのように設計されたかについて背景を説明すると役立つでしょう。

React と連携し、Pages Router の先へ

Next.js で構築されるアプリケーションの採用が増え、規模が拡大するにつれて、コミュニティからフィードバックを受け、Pages Router の限界に達し始めた領域を特定しました。

特に、Next.js Pages Router は、現代のReactにおける基盤となるプリミティブであるストリーミング向けに設計されていませんでした。ストリーミングは、私たちが直面していた限界に対処し、Next.js の長期的なビジョンを実現するのに役立ちます。

データフェッチ、アセットローディング、ページメタデータのためのストリーミング対応フレームワーク API の作成、および React の新しいプリミティブを活用するには、Next.js のコアアーキテクチャに大きな変更が必要でした。

私たちは、Server Components や Suspense など、最新の React コンカレント機能の上に構築する機会を捉えました。これらはストリーミングアーキテクチャ向けに設計されています。

段階的な導入は不可欠

コミュニティに、Next.js の最新バージョンに更新するためにアプリケーション全体をゼロから再構築してもらうことを望んでいませんでした。段階的な導入が、時間の経過とともにアプリケーションを進化させるための最善の戦略だと考えています。

• ルートごとの段階的移行：アプリケーションを大幅に書き直すことなく、アプリケーションの単一ルートを App Router に移行し、自分のペースで新機能を利用し始めることができます。当社の段階的導入ガイドを参照するか、チュートリアルを見ることができます。
• 簡単にロールバック：App Router のパフォーマンスや開発者エクスペリエンスに満足できない場合でも、特定のルートについては Pages Router に簡単にロールバックできます。

段階的な導入をさらに容易にするための機会をさらに模索しています。

安定性への道

Next.js App Router の構築は1年以上前に開始し、それ以来、新機能と改善を着実にリリースしてきました。

• 初期発表：その年の5月、ルーティングとレイアウトをより柔軟にするための計画を概説するためにRFC をリリースしました。
• 初期ベータ版：Next.js 13 で、App Router の最初のバージョンをリリースし、コミュニティが試用して早期フィードバックを提供できるようにしました。
• 安定版 API：フィードバックに応え、コア API の最終化に注力しました。13.4 では、App Router のコア API を安定版として、より広範な導入の準備ができたものとしました。

現在の焦点

安定性を明記したことで、コア API が確定し、書き換えを必要とするような大きな破壊的変更は行われないことをコミュニティに示しました。

それ以来、多くの貴重なフィードバックを受け、導入の増加は必然的にバグとさらなる改善の機会を明らかにしました。

App Router の使用体験にまだ満足していないことを知っていただきたいと思います。そして、それが今後の最優先事項です。そこで、この体験を向上させるために行っている作業についてお話しましょう。

パフォーマンスの向上

今後数か月間、私たちはパフォーマンスの3つの側面、つまりローカルのイテレーション速度、プロダクションビルド時間、サーバーレスパフォーマンスに焦点を当てています。

ローカル開発パフォーマンス

Next.js が成熟し、それを使って構築されるアプリケーションの規模が拡大するにつれて、その基盤となるアーキテクチャのコンポーネントを、より高速でスケーラブルなツールに徐々に、段階的に置き換えてきました。

• 移行の進捗：まず、Babel (コンパイル) と Terser (ミニファイ) を SWC に置き換えることから始めました。これにより、ローカルのイテレーション速度とプロダクションビルド時間の改善に貢献しました。

• 長期的な投資：アプリケーションのサイズに関わらず優れた Fast Refresh パフォーマンスを維持するということは、ローカル開発中に Next.js が可能な限り段階的に動作し、必要なコードのみをバンドルおよびコンパイルすることを意味します。

  これが、現在 webpack (バンドル) を Turbopackに置き換える作業を行っている理由です。Turbopack は、個々の関数レベルまでキャッシュを可能にする低レベルの段階的計算エンジン上に構築されています。

  Turbopack に移行する Next.js アプリケーションは、規模が拡大しても Fast Refresh の速度が持続的に向上します。

  ここ数ヶ月間、Turbo チームは Turbopack のパフォーマンス向上と、すべての Next.js 機能および App Router API のサポートに注力してきました。

  Turbopack は現在、ベータ版で利用可能です (next dev --turbo)。

• 既存アーキテクチャの改善：未来への投資に加え、既存の webpack アーキテクチャのパフォーマンス改善も引き続き行っています。

  特定の Next.js アプリケーション、特に数千のモジュールをリフレッシュするアプリケーションでは、ローカル開発と Fast Refresh で不安定性の報告が見られました。現在、ここでパフォーマンスと信頼性を向上させるよう取り組んでいます。例えば、最近、誤って数千ものモジュールをリクエストごとに再ロードしてしまう可能性のある大規模なアイコンライブラリを処理するための事前設定（modularizeImports）を追加しました。

ビルド時のパフォーマンス

また、Turbopack を使用したプロダクションビルド（next build --turbo）にも取り組んでおり、この作業の最初の部分を着手し始めました。今後のリリースで、この件に関するさらなる更新にご期待ください。

本番環境のパフォーマンス

最後に、Vercel では、Next.js アプリケーションコードで定義された Vercel Functions のパフォーマンスとメモリ使用量を最適化し、スケーラブルなサーバーレスアーキテクチャの利点を維持しつつ、コールドスタートを最小限に抑えるよう取り組んでいます。この作業により、Next.js に新たなトレース機能（実験的）が導入され、サーバーサイド開発者ツールの初期的な調査が進められています。

安定性の向上

Pages Router は登場から6年が経過しました。App Router のリリースは新しい API の導入を意味し、まだ使用開始から6か月しか経っていません。短期間で大きな進歩を遂げましたが、コミュニティからその使い方についてさらに学ぶにつれて、改善の機会はまだあります。

App Router を積極的に採用し、フィードバックを提供してくださるコミュニティの意欲に感謝いたします。現在調査中のバグ報告が多数あり、問題の特定と修正の検証に役立つ最小限の再現を作成してくださったことに感謝しています。

13.4 以降、最新のパッチリリース（13.4.7）で利用可能な、安定性に関する多くの影響の大きいバグをすでに修正しました。今後も引き続き、パフォーマンスと安定性に注力していきます。

開発者教育の向上

App Router とモダン React の新機能は強力であると信じていますが、これらの新しい概念を教えるためには追加の教育とドキュメントも必要です。

Next.js の機能

過去1年間、Next.js のドキュメントをゼロから書き直す作業を進めてきました。この作業は現在nextjs.org/docsで公開されています。いくつかの重要な点を強調したいと思います

• Pages と App の切り替え：ドキュメント左側のボタンを使って、Pages Router と App Router のドキュメントを切り替えることができます。さらに、ルーターの選択に基づいて検索結果をフィルタリングすることも可能です。
• コンテンツと情報アーキテクチャの改善：App Router ドキュメントのほぼすべてのページが更新され、より明確な構造とページ間の整合性が向上し、Next.js がどのように機能するかを視覚的に説明するための数百の新しいイラストが追加されました。
• さらなる展開：ここではまだ多くの作業が残っています。Vercel の開発者エクスペリエンスチームは、追加の学習リソース（App Router を教える/learn上の更新されたコースを含む）や、実際のコードベースの例（Next.js Commerceの書き換えを含む）を提供するために精力的に取り組んでいます。

私たちは、ドキュメント、Twitter、YouTubeなどで新しいコンテンツをリリースしていきます。

新しい React の機能

Next.js App Router で利用できる新しい React 機能に関する教育についても、フィードバックをいただいています。

• Server Components：Server Components や "use client" ディレクティブのような機能や慣例は、Next.js 固有のものではなく、React エコシステム全体の大きな部分を占めていることに注意することが重要です。

  当社のチーム、Meta のパートナー、およびその他の独立したコントリビューターは、これらのトピックに関するさらなる教育を提供するために取り組んでいます。これらの概念はまだ初期段階ですが、私たちは React エコシステムと継続的な教育に自信を持っています。

• Client Components：Server Components を巡る最近の議論において、クライアントコンポーネントがパフォーマンスの「デ最適化」ではないことに注意することが重要です。クライアントは React モデルの有効な部分であり、今後も存続します。

  クライアントコンポーネントは、お気に入りのライブラリやツールが引き続き機能する、今日の既存の Next.js エコシステムと考えることができます。例えば、よく見かける質問として、"use client"をすべてのファイルに追加してクライアントコンポーネントにする必要があるかどうか、というものがあります。これは不要ですが、これらの概念が新しく、学習に時間がかかることは理解しています。コードがサーバーからクライアントに移動するトップレベルの境界線をマークするだけでよいのです。このアーキテクチャにより、サーバーとクライアントのコンポーネントを組み合わせることができます。

• 成長するサードパーティエコシステム：教育に加え、React の新しい機能を取り巻くエコシステムはまだ成長中です。例えば、Chakra UI の開発元である CSS-in-JS ライブラリのPanda CSSが、React Server Components のサポートを発表しました。

• Server Actions (アルファ版)：Server Actions は、サーバーサイドのデータミューテーション、クライアントサイド JavaScript の削減、およびプログレッシブエンハンスドフォームを可能にします。Server Actions はまだプロダクション環境での使用を推奨していません。この機能の未来を形作るのに役立つアルファテスターからの早期フィードバックに感謝いたします。

ありがとうございました

Next.js を学習し、構築することを選択してくださった多くの方々に感謝しています。

パフォーマンス、安定性、開発者エクスペリエンスへの私たちの注力は、今後の Next.js のリリースに反映されます。私たちは Next.js を使うことが楽しいと感じられ、あなた（そしてあなたのチーム）をより生産的にしたいと考えています。

いつも通り、皆様からのフィードバックに心より感謝いたします。Next.js で問題が発生した場合は、課題を開くか、新しい議論を開始してください。調査いたします。