実践Next.js - App Router への理解を深めるために -
Next.js の App Router を中心に解説した書籍を執筆しました。「実践 Next.js —— App Router で進化する Web アプリ開発」という本です（3/16 刊行）。本稿では書籍の概要と、App Router が何を解決するのかについて紹介します。
書籍の概要
書籍で解説しているサンプルコードは、public リポジトリで既に公開しています。前半、第 1 章〜第 4 章では App Router の基礎を抑えるための練習用リポジトリを使用します。後半、第 5 章〜第 10 章では、写真を投稿する SNS「Photo Share」という架空アプリの実践的リポジトリを使用します。
- 第 1 章：Next.js の基礎
- 第 2 章：Server Component とレンダリング
- 第 3 章：App Router の規約
- 第 4 章：Route Handler
- 第 5 章：サンプルアプリの概要
- 第 6 章：データ取得とキャッシュ
- 第 7 章：認証機能
- 第 8 章：モーダル表示とデータ連携
- 第 9 章：データ更新と UI
- 第 10 章：パフォーマンスとキャッシュ
- 付録 A：Prisma
Next.js 以外のサードパーティライブラリとして、DB サーバーに接続する ORM ライブラリの「Prisma」と、認証ライブラリの「NextAuth.js」を採用しています。これは、App Router の特徴を掴むため（アプリ構築に不可欠なため）採用しています。読み進めるにあたり、これらの使用方法について必要最低限の解説を挟んでいるので、初めて触れられる方でも読み進められるかと思います。
本書を手に取られた方の中には「そもそも、App Router が何を解決するのか？なぜ必要なのか？」という方もいらっしゃるかと思います。以降は、これらの疑問について答えていきます。
App Router が登場した背景
昨今、React に新機能である RSC（React Server Component）が搭載されました。Next.js の App Router は RSC が今すぐ使用できる数少ないフレームワークであり、ここが Pages Router との一番の差分と言えます。Pages Router では画面が大きく（コンポーネントが多く）なるにつれ、ブラウザにダウンロードする JavaScript が多くなり、パフォーマンスが低下していく傾向にありました。App Router の場合、RSC によってサーバーだけで実行されるコンポーネントが導入されるため、この懸念が少なくなります。
RSC と言えば"use client"ディレクティブを使用した「Server Component／Client Component」の切り替えがあります。App Router の公式ドキュメントでもこのトピックについて触れられていますが、これは Next.js 固有のものではなく React 共通のものです。このディレクティブを使用することで「ブラウザでも実行する必要があるコンポーネントはここから」と境界を宣言することができます。つまり、ブラウザにダウンロードする JavaScript を最小限に絞る事ができます。
まとめると、App Router は RSC（そして Streaming SSR や Suspense）などの React の新しい機能がデフォルトで使用されるため、従来よりパフォーマンスが高く、画面の肥大化によるパフォーマンスの劣化が起きにくいフレームワークとなっています。
App Router の優位性はなにか
App Router のドキュメントでは、必要な事前知識として RSC や"use client"ディレクティブの解説がされています（React のトピックではありますが）。RSC が採用されるであろう後発の React フレームワークも同様に、パフォーマンスの向上が見込まれるでしょう。では、App Router ならではの優位性はどこにあるのでしょうか？
まず、プロジェクトの準備が非常に簡単です。公式から提供されているcreate-next-appを使用すれば、SSR のためのセットアップをしたり、バンドラーを調整する必要がありません。最小限の設定でプロジェクトが準備できることは、Pages Router の頃から変わらない Next.js の魅力です。
Route 階層に応じて画面レイアウトを構築する「Nested Layout」は Pages Router には無かった機能です。ナビゲーションに応じて必要最小限のコンポーネントのみがレンダリングされるため、画面提供に必要な負荷が最小限に抑えられます。
一番の優位性は「キャッシュ」です。Next.js には「ページ単位で SSG／SSR を切り替えられる」という特徴が Pages Router の頃から備わっていました。あらかじめ SSG で出力された静的ファイルは、CDN から配布可能なため TTFB が最速です。App Router では、SSG で出力された静的ファイルも「キャッシュの一種」として扱われています。この従来のキャッシュだけでなく、App Router では「コンポーネント単位、データ取得単位」でキャッシュを持つようになりました。このキャッシュこそが、Next.js App Router ならではの優位性です。
App Router のキャッシュ
デフォルトで、サーバーにおいて fetch 関数でデータ取得した結果は、Next.js がキャッシュします。このキャッシュがあることで、データソースアクセス効率の改善が見込まれます。データが必要なコンポーネントは、データ取得先である Web API サーバーのレスポンスを毎回待つ必要がありません。このキャッシュの存続期間はコントロール可能であり、キャッシュさせないことも可能です。
ほかにもパフォーマンス向上のために、合計で 4 種類のキャッシュがあります。これは App Router の理解を深めるために最も重要なトピックであり、理解するまでに時間のかかるものです。書籍はこのトピックに向け収束するよう構成しており、読者の皆様の理解を助けるものとなるよう工夫しました。
もうひとつ React に搭載された新機能「Server Action」は「キャッシュの無効化」に関連する App Router に不可欠な機能です。Server Action を使用した実装パターンについても、筆者が現時点で良いと考えているものを紹介しています（第 9 章）。Server Action を今すぐ使えるという意味でも、App Router を試してみる価値はあると考えます。
まとめ
App Router は、RSC を試す準備ができています。App Router ならではの細かな挙動やキャッシュの理解も必要ですが、試してみる事で、React がどのような方向に進化しているのかを知ることができるでしょう。
本書は、公式ドキュメントからは読み解きづらい箇所を筆者なりの視点で構成、解説しました。App Router をメインテーマとして扱う書籍としては、おそらく国内初になるのではと思っています。発売までまだ少しお待ちいただきますが、ぜひ手に取っていただけると嬉しいです。
Discussion