Next.js App Router アップデート

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

今後のNext.jsリリースでは、以下の領域に焦点を当てています:

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

App Routerについて

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

Pages Routerを超えてReactと連携する

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

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

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

私たちは最新のReact並行機能（サーバーコンポーネント、Suspenseなど）の上に構築する機会を得ました。これらはストリーミングアーキテクチャ向けに設計されています。

段階的採用は必須

コミュニティが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）を追加しました。これにより、リクエストごとに数千のモジュールが誤って再読み込みされるのを防ぎます。

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のDeveloper Experienceチームは、追加の学習リソース（App Routerを教える更新された/learnコースを含む）と実際のコードベース例（Next.js Commerceの書き換えを含む）を提供するために懸命に取り組んでいます。

ドキュメント、Twitter、YouTubeなどで新しいコンテンツをリリース予定です。

新しいReact機能

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

サーバーコンポーネント: サーバーコンポーネントや"use client"ディレクティブのような規約はNext.js固有のものではなく、Reactエコシステムの大きな一部であることに注意することが重要です。

私たちのチーム、Metaのパートナー、その他の独立した貢献者が、これらのトピックに関するより多くの教育を提供するために取り組んでいます。これらの概念は初期段階ですが、Reactエコシステムと継続的な教育に自信を持っています。
クライアントコンポーネント: 最近のサーバーコンポーネントに関する議論の中で、クライアントコンポーネントが非最適化ではないことに注意することが重要です。クライアントはReactモデルの有効な一部であり、なくなることはありません。

クライアントコンポーネントは、既存のNext.jsエコシステムと考えてください。お気に入りのライブラリやツールが引き続き動作します。例えば、よくある質問として、すべてのファイルに"use client"を追加してクライアントコンポーネントにする必要があるかどうかがあります。これは必要ありませんが、これらの概念は新しく、学ぶのに時間がかかることを理解しています。サーバーからクライアントにコードが移動するトップレベルの境界のみをマークする必要があります。このアーキテクチャにより、サーバーとクライアントコンポーネントを織り交ぜることができます。
成長するサードパーティエコシステム: 教育に加えて、Reactの新機能を中心としたエコシステムはまだ成長中です。例えば、Chakra UIの製作者によるCSS-in-JSライブラリPanda CSSが、Reactサーバーコンポーネントのサポートを発表しました。
サーバーアクション（アルファ版）: サーバーアクションは、サーバーサイドのデータ変更、クライアントサイドJavaScriptの削減、プログレッシブエンハンスメントフォームを可能にします。まだ本番環境でのサーバーアクションの使用は推奨していません。この機能の未来を形作るのに役立つアルファテスターからの早期フィードバックに感謝しています。

感謝

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

パフォーマンス、安定性、開発者体験への焦点は、今後のNext.jsリリースに反映されます。Next.jsの使用が楽しく、あなた（とあなたのチーム）がより生産的になることを望んでいます。

いつものように、皆さんのフィードバックに大変感謝しています。Next.jsで問題が発生した場合は、issueを開くか、新しいディスカッションを開始してください。調査いたします。