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のコアアーキテクチャに大きな変更が必要でした。

最新のReactの同時実行機能（Server Components、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に移行した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のリリースは、まだ新しく、使用実績が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に関する最近の議論に伴い、Client Componentsは最適化の解除ではありません。ClientはReactモデルの有効な一部であり、なくなりません。

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

• サードパーティエコシステムの成長: 教育に加えて、Reactの新しい機能に関するエコシステムもまだ成長しています。例えば、Chakra UIの作成者によるCSS-in-JSライブラリであるPanda CSSは、React Server Componentsのサポートを発表しました。

• Server Actions (Alpha): Server Actionsは、サーバーサイドのデータミューテーション、クライアントサイドJavaScriptの削減、および段階的に拡張されたフォームを可能にします。現時点ではServer Actionsを本番環境で使用することは推奨していません。アルファテスターからの早期フィードバックが、この機能の将来を形作るのに役立っています。

ありがとうございます

Next.jsでの学習と開発を選択してくださった多くの方々に感謝しています。

パフォーマンス、安定性、開発者エクスペリエンスへの注力は、今後のNext.jsのリリースに反映されます。Next.jsの使用を楽しく、そしてあなた（とあなたのチーム）をもっと生産的にしたいと思っています。

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