Next.js Conf 25: Opening Keynote
44分 32秒
Next.js App Routerの進化と未来: RSC、Turbopack、AIの新たな一手
この記事は動画の内容を元にAIが生成したものです。正確な情報は元の動画をご確認ください。
ポイント
- •Next.js App Routerの進化と、React Server ComponentsやServer ActionsなどVercelが「賭け」た主要機能の成功と採用状況を解説します。
- •開発速度を劇的に向上させるTurbopackがNext.js 16でデフォルトになることや、開発用ファイルシステムキャッシュのベータ提供について理解できます。
- •AIエージェント時代に向けたNext Evalsのオープンソース化、Next.jsのさらなる未来像、そして今後の課題であるキャッシュ問題について知見を得られます。
皆様、こんにちは！今回は、毎年恒例のNext.js Confで発表された、Next.jsの最新動向とApp Routerの進化について深く掘り下げていきます。特に、VercelのCEOであるGuillermo Rauch氏が語った「賭け」がどのように実を結び、Next.jsがどこへ向かっているのかを詳しく見ていきましょう。
Next.js App Router 時代の幕開けと驚異的な成長
Next.jsはApp Routerの時代に突入して1年半が経過しました。この期間、Next.jsのダウンロード数は週あたり700万回から驚くべき1300万回へと、わずか1年でほぼ倍増しています。この成長は、Next.js開発チームがApp Routerの開発において行った多くの「賭け」が成功していることを明確に示しています。
App Routerが最初にローンチされた際、以下の先進的な機能が導入されました。
- React Server Components（RSC）： 当時としては最も早い段階での主流実装でした。
- ネストされたレイアウト： 柔軟なUI構築を可能にしました。
- ファイルシステムベースのルーティング： 直感的で効率的なルーティングAPIを提供しました。
- Turbopackの開発開始： この新しいサーバーファーストアーキテクチャがあらゆる規模のアプリケーションでスケーリングすることを保証するために開発されました。
さらに、近年急速に発展している大規模言語モデル（LLM）やAIエージェントの登場は、ソフトウェア開発のアプローチを大きく変えつつあります。手作業でのコーディングから、AIによる提案、コード生成、そして機能全体の開発、テスト、実行、デプロイまでをこなすエージェントの時代へと移行しています。このような変化は、API設計の重要性をさらに高めており、人間にとってもAIエージェントにとっても使いやすいAPIの提供が求められています。
成功した主要な「賭け」
Next.js開発チームが行った多くの賭けの中で、特に成功を収めた主要な要素について詳しく見ていきましょう。
1. React Server Components（RSC）
React Server Components（RSC）は、当初は「新しい未証明のアーキテクチャ」への投資でした。しかし今日では、RSCはReactエコシステム全体で広く採用されています。Vite、React Router、Redwood SDK、Waku、Parcelなどの人気プロジェクトで採用が進んでおり、TanStackのようなプロジェクトも積極的に統合に取り組んでいます。さらに、React以外のプロジェクト、例えばSvelteのようなフレームワークでも、より多くのレンダリングをサーバーサイドで行う動きが見られ、「サーバーが再び主役になっている（The server is so back）」というトレンドを生み出しています。
RSCは、選択するフレームワークに関わらず、すべてのReactアプリケーションがデータをフェッチし、サーバーサイドとクライアントサイドのロジックを統合するための規範的な（idiomatic）方法を提供します。この革新は、Reactエコシステムの発展に大きく貢献し続けています。
2. Server Actions
Server Actionsもまた、成功を収めている機能の一つです。これにより、APIリクエストをReactコンポーネントの内部で直接処理できるようになりました。React Server ComponentsとServer Actionsの組み合わせにより、Next.jsはデータの読み込みと書き込みの両方に対して、ファーストクラスの規範的なAPIをサポートするようになりました。これはPages Router時代にはなかった大きな進化です。
3. 新しいルーティングアーキテクチャ（App Router）
新しいルーティングアーキテクチャも大きな成功を収めています。App Routerは以下のような機能を提供します。
- ナビゲーション間のレイアウト永続化： 不要な再レンダリングを回避し、Reactの理想的な動作を実現します。
- RSCの更新中の一時的な状態維持： ユーザー体験を向上させます。
- 高度なルーティングパターン： 並列ルーティング（Parallel Routes）やインターセプトルーティング（Intercepting Routes）などの複雑なルーティングパターンをサポートします。
- ファイルシステム規約： 各画面のUI、データ、ロジックをまとめて管理できます。
これらの機能は、最も野心的なアプリケーションにおいても新たなレベルのスケーラビリティを可能にしています。
4. Turbopack
Turbopackは、Next.jsチームが行った最大の賭けの一つです。初めてデモを見たとき、シングルミリ秒台での高速リフレッシュを実現していることに驚きを覚えたとCEOは語ります。当初は「これほどの価値があるのか？」という疑問もありましたが、AIエージェントのループでは1ミリ秒が重要であるという結論に至りました。
現在、TurbopackはNext.js 15の開発セッションの半分以上を支え、毎週50万人以上の開発者が利用しています。昨年、開発用途で安定版としてリリースされた後、今年の目標はすべての新しいアプリケーションでデフォルトで有効にすることでした。この目標を達成するため、8,266もの既存のNext.jsビルドタイム機能テストをすべてパスさせ、社内の本番サイトでTurbopackをビルドに採用することでその堅牢性を証明しました。
そして今回、Next.js 16のすべてのアプリケーションでTurbopackがデフォルトで採用されることが発表されました。Webpackのサポートをすぐに終了するわけではなく、両方を引き続き提供することで後方互換性を重視しつつ、Next.jsを多くのユーザーにとって驚くほど高速に設定しています。
TurbopackとWebpackの比較では、以下のような驚くべき改善が見られます。
- 本番ビルド： 最大7倍高速
- 開発時の初期ロード時間： 最大3.2倍高速
- HMR（Hot Module Replacement）更新： Next.js 16で最大70倍高速
Turbopackは特に更新処理に優れており、一度ウォームアップすると、タスクを詳細なレベルで追跡し、不要な作業を回避します。しかし、開発サーバーを停止すると、これまでの作業が失われ、新しい開発セッションでは最初からやり直す必要がありました。
この課題に対処するため、この1年間で反復的な改善が行われ、今回、**開発用のファイルシステムキャッシュがベータ版として発表されました。**これは、Turbopackのインメモリタスクトラッキングを、ファイルシステムを活用してサーバーの完全な再起動後も持続させるものです。この機能は、特に大規模なプロジェクトにとって非常に有用であり、将来的には本番ビルドにもこの革新的な技術が導入される予定です。これにより、開発とデプロイをこれまで以上に高速化できるでしょう。
エージェントが継続的にプルリクエストを開き、プレビュービルドを作成する現代において、Turbopackは計り知れない価値をもたらします。
AI時代のNext.js: Next Evalsのオープンソース化
AIエージェントの進化に伴い、Next.jsチームは、モデルをNext.jsの最新のベストプラクティス（Server Components、Server Actionsなど）で常に最新の状態に保つことの重要性に賭けています。古いAPIを使うAIのアドバイスにうんざりするような経験を避けるためです。
この課題に対応するため、**Next Evalsがオープンソース化されました。**Next Evalsは、最新のモデルやコーディングエージェントがNext.jsを使ってどれだけうまくアプリケーションを構築できるかを追跡する公開ベンチマークです。これはエコシステムへの投資であり、AIがNext.jsの扱いが上手くなるほど、すべての開発者の体験が向上すると期待されています。AI分野の関係者には、協力が呼びかけられています。
再検討が必要な「賭け」：キャッシュ
すべての賭けが成功するわけではありません。過去2年間、Next.jsチームが改善に取り組んできた中で、大きな課題となっているのが「キャッシュ」です。デフォルトで静的コンテンツを生成しようとする試みは、Next.jsの静的レンダリング機能とApp Routerのネストされたレイアウトを組み合わせる際に、APIが混乱し、予測不可能な動作を引き起こす結果となりました。この点については、引き続き改善が模索されています。
まとめ
Next.jsはApp Routerの登場以来、React Server Components、Server Actions、新しいルーティングアーキテクチャ、そしてTurbopackといった多くの「賭け」を成功させてきました。特に、Turbopackのデフォルト化や開発用ファイルシステムキャッシュの導入は、開発体験とビルドパフォーマンスを劇的に向上させるものです。また、Next Evalsのオープンソース化は、AI時代における開発者の生産性向上に対するNext.jsチームの強いコミットメントを示しています。
キャッシュの課題のように再検討が必要な点もありますが、Next.jsはコミュニティの協力のもと、常に進化を続けています。今後のさらなる発展に期待しましょう。