Next.js App Router Update

ブログに戻る

2023年6月22日（木）

Next.js App Router のアップデート

Posted by Delba de Oliveira @delba_oliveira、Lee Robinson @leerob

App Router は Next.js の未来に向けた新しい基盤を表しますが、利用体験を改善できる余地があることも認識しています。現在の優先事項についてアップデートをお伝えします。

今後の Next.js リリースでは、以下の分野に注力します。

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

App Router

まず、App Router の設計に関する文脈を示すことが役立ちます。

Pages Router を超えて — React と整合させて拡張

Next.js の採用が進み大規模なアプリケーションが増えるにつれ、コミュニティからのフィードバックを受け、Pages Router の限界に直面している領域が見えてきました。特に、Next.js Pages Router はストリーミングのために設計されておらず、これはモダンな React における重要なプリミティブです。ストリーミング対応のデータフェッチ、アセット読み込み、ページメタデータ用のフレームワーク API を作ることや、React の新しいプリミティブを活用することは、Next.js のコアアーキテクチャに大きな変更を必要としました。

この機会に、Server Components、Suspense、その他の React の最新の concurrent 機能（ストリーミングアーキテクチャ向けに設計されたもの）上に構築しました。

インクリメンタルな導入は必須

コミュニティがアプリケーション全体を一から作り直して最新の Next.js に移行する必要があるようにはしたくありません。インクリメンタル導入は、時間をかけてアプリケーションを進化させるための最良の戦略だと考えています。

• ルートごとのインクリメンタル移行: アプリ全体を大幅に書き直すことなく、アプリケーションの単一ルートを App Router に移行し、段階的に新機能を利用できます。インクリメンタル導入ガイドやチュートリアルを参照してください。
• 簡単なロールバック: App Router のパフォーマンスや開発体験に満足できない場合、その特定ルートについて Pages Router に簡単に戻せます。

さらにインクリメンタル導入を容易にする機会を模索しています。

安定化への道

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

• 初期発表: その年の5月に、ルーティングとレイアウトをより柔軟にする計画を概説するRFCを公開しました。
• 早期ベータ: Next.js 13 で App Router の最初のバージョンをリリースし、コミュニティに試してもらい早期フィードバックを受け取りました。
• 安定 API: フィードバックに応じてコア API の確定に注力し、13.4 で App Router のコア API を安定としてマークし、より広い導入に備えました。

現在のフォーカス

安定化の宣言は、コア API が確定しており大幅な破壊的変更（アプリの書き直しを必要とするようなもの）は行わないというコミュニティへのシグナルでした。その後、多くの貴重なフィードバックが寄せられ、導入拡大に伴いバグや改善の余地が明らかになっています。App Router を使った体験に私たちはまだ満足しておらず、これが今後の最優先事項です。以下に行っている作業を説明します。

パフォーマンスの改善

今後数か月で、以下 3 つの観点に注力します: ローカルでの反復速度（開発速度）、production ビルド時間、サーバーレスのパフォーマンス。

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

Next.js が成熟し、構築されるアプリの規模が大きくなるにつれて、基盤となるアーキテクチャの一部をより高速でスケーラブルなツールに置き換えてきました。

• 移行の進捗: Babel（コンパイル）や Terser（最小化）を SWC に置き換え始めました。これによりローカルの反復速度と production ビルド時間が改善されました。
• 長期投資: アプリの規模にかかわらず Fast Refresh の性能を維持するには、ローカル開発時に可能な限りインクリメンタルに動作させ、必要なときにのみコードをバンドル・コンパイルすることが重要です。これが理由で、現在 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）を追加しました。

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

production ビルドでも Turbopack（next build --turbo）での対応に取り組んでおり、この作業の最初の部分を既に導入し始めています。今後のリリースでさらにアップデートを行う予定です。

Production のパフォーマンス

Vercel 上では、Next.js アプリケーションコード経由で定義された Vercel Functions のパフォーマンスとメモリ使用量を最適化し、スケーラブルなサーバーレスの利点を保ちつつコールドスタートを最小にするための作業を進めています。この取り組みは Next.js における新しいトレース機能（experimental）や、サーバーサイドの開発者向けツールの初期検討につながっています。

安定性の向上

Pages Router は6年間存在してきました。App Router のリリースは新しい API の導入を意味し、それらはまだ若く、使用期間はわずか6か月です。短期間で大きく前進しましたが、コミュニティと実際の利用方法から学ぶ中で改善すべき点は残っています。

コミュニティが積極的に App Router を採用しフィードバックをくれたことに感謝しています。多くのバグ報告を調査しており、簡潔な再現例（minimal reproductions）は問題の切り分けと修正の検証に役立っています。

13.4 以降、安定性に関する重大なバグのいくつかを既にパッチし、最新のパッチリリース（13.4.7）で利用可能にしています。今後も高い強度でパフォーマンスと安定性に注力していきます。

開発者向け教育の改善

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

Next.js ドキュメント

過去1年で Next.js のドキュメントをゼロから書き直す作業を行ってきました。これは現在 nextjs.org/docs で公開されています。重要な点をいくつか挙げます:

• Pages と App の切り替え: ドキュメント左側のボタンで Pages Router と App Router のドキュメントを切り替えられます。また、検索結果をルーター選択でフィルターすることもできます。
• コンテンツと情報アーキテクチャの改善: App Router ドキュメントのほぼ全ページを刷新し、より明確な構成とページ間の一貫性、視覚的に説明するための数百点の新しい図を追加しました。
• 今後の追加: 作業はまだ続きます。Vercel の Developer Experience チームは追加の学習リソース（App Router を教える更新された /learn のコースを含む）や実践的なコードベースの例（Next.js Commerce の書き直しを含む）を提供するために尽力しています。ドキュメント、Twitter、YouTube などで新しいコンテンツを順次リリースします。

新しい React 機能

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（Alpha）: Server Actions はサーバー側でのデータ変更、クライアント側の JavaScript 削減、段階的に強化されたフォームを可能にします。現時点での本番利用は推奨していませんが、アルファテスターからの早期フィードバックはこの機能の将来を形作るのに役立っています。

感謝

多くの皆さんが Next.js を学び、構築のために選んでくれていることに感謝します。パフォーマンス、安定性、開発者体験への注力は今後の Next.js リリースに反映されます。Next.js の利用が楽しく、あなた（とあなたのチーム）の生産性が向上することを目指しています。

いつも通り、フィードバックを心より歓迎します。Next.js に関する問題がある場合は、issue を開くか、新しい discussion を始めてください。調査します。