Next.js App Router アップデート
2023年6月22日（木）投稿
投稿者: Delba de Oliveira @ delba_oliveira, Lee Robinson @ leerob
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にロールバックできます。
私たちは、インクリメンタル採用をさらに簡単にする機会を探求しています。
安定性への道のり
私たちは1年以上前からNext.js App Routerの構築を開始し、それ以来着実に新機能と改善をリリースしてきました。
初期発表: その年の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チームは、すべてのNext.js機能とApp Router APIのTurbopackパフォーマンスとサポートの改善に焦点を当ててきました。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のリリースは、わずか6ヶ月の使用でまだ若い新しいAPIの導入を意味しました。短期間で大きく前進しましたが、コミュニティとその使用方法からより多くを学ぶにつれて、改善の機会がまだあります。
コミュニティが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のDeveloper Experienceチームは、追加の学習リソース（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で問題が発生している場合は、issue を開くか、新しいディスカッションを開始してください。調査いたします。