Next.jsの進化の象徴である「App Router」。従来のPages Routerから何が変わったのか、なぜ今これほど注目されているのか気になっている方も多いのではないでしょうか。
App Routerは、単なるルーティングの変更に留まらず、Reactの最新機能を最大限に引き出すための機能です。フォルダベースの直感的な画面管理、表示速度を劇的に向上させるServer Components、そして開発を効率化するServer Actionsなど、モダンなWeb開発に欠かせない強力な機能が凝縮されています。
本記事では、App Routerの基本概念から具体的な主要機能を簡単に解説しています。
App Routerとは何か？
Next.jsのApp Routerは、2023年に安定版としてリリースされた比較的新しい仕組みです。
それまでの「Pages Router」という仕組みをより進化させ、モダンなWeb開発をより直感的に、そして高速に行えるように設計されています。
App Routerの主な特徴は以下の６つです。
- フォルダ構成がそのままURL（ルーティング）になる
- Server Components（サーバーコンポーネント）による表示高速化
- ページごとに「読み込み中」を自動表示 (
loading.tsx) - ページが壊れてもサイト全体を落とさない (
error.tsx) - フォーム送信が超簡単に (
Server Actions) - キャッシュ（記憶）の自動化
フォルダ構成がそのままURL（ルーティング）になる
App Routerでは、app フォルダの中に作成した 「フォルダの名前」 がそのままURLのパスになります。
画面を表示するためにはそのフォルダの中に page.tsx という名前のファイルを作成します。
app/
├─ page.tsx → https://example.com/ （トップ）
├─ about/
│ └─ page.tsx → https://example.com/about （会社概要）
└─ services/
├─ page.tsx → https://example.com/services （サービス一覧）
└─ web-design/
└─ page.tsx → https://example.com/services/web-design （詳細ページ）
なお、動的に変化するURLも [id] のようなフォルダ名にすることで対応できます。
(admin) といったフォルダ名を作成すると、URLでは ()の部分をスキップしてURLを生成することができます。
Server Components（サーバーコンポーネント）による表示高速化
App Routerでは、コンポ―ネントがデフォルトで「サーバーコンポーネント」になります。
これは、サーバー上でのみ実行し、サーバー側でHTMLを作成してブラウザに渡します。このため、ブラウザにはJavaScript を送りません。
結果的に、ページ表示が爆速になります。
ブラウザでボタンクリックや入力などのユーザーによる操作が発生する場合はサーバーコンポーネントでは対応できません。
この場合は、クライアントコンポーネントにする必要があります。詳細は下記をご参考ください。
＞ 【Next.js/React.js】use clientとは何か？サーバーコンポーネントとクライアントコンポーネントの違い
ページごとに「読み込み中」を自動表示 (loading.tsx)
これまでのWeb開発では、データを読み込んでいる間に「くるくる（スピナー）」を出すために、わざわざ「読み込み中かどうか」の状態をプログラムで管理する必要がありました。
App Routerでは、フォルダの中に loading.tsx というファイルを置くだけで、Next.jsが自動的に読み込み状態を判定して表示してくれます。
全体に共通したローディング画面を設置したい場合は、appディレクトリ直下にloading.tsxを配置します。
更にページ毎に個別のローディング画面を作成したい場合は、各ページ（page.tsx）と同じ階層にloading.tsxを配置します。
より下層のloading.tsxを優先し読み込みます。
app/
├─ page.tsx
├─ loading.tsx ← 全体共通
└─ services/
├─ page.tsx
├─ loading.tsx ← /services 共通
└─ web-design/
├─ page.tsx
└─ loading.tsx ← 詳細ページ専用ページが壊れてもサイト全体を落とさない (error.tsx)
通常、一部のページでエラー（例：APIが動いていない）が発生したとき、サイト全体がエラー画面（404や500）になってしまいます。
ですが、App Routerの error.tsx を使うと、エラーが起きた特定の範囲だけをエラー表示に差し替え、他の部分はそのまま動かし続けることができます。
フォーム送信が超簡単に (Server Actions)
「お問い合わせフォーム」や「ログイン」など、ユーザーが入力したデータをサーバーに送る処理が、普通の関数を呼び出すように書けるようになりました。
例えば、SNSのいいねボタンの場合、これまでは「いいねボタンを押す」→「APIを叩く」→「データベースを更新」という手順を別々のファイルに書いていました。
App Routerなら1つのファイルの中で完結します。
// ボタンを押した時の処理を同じファイルに書ける
async function handleLike() {
'use server'; // サーバーで実行することを宣言
await db.like.create({ data: { postId: 1 } });
}キャッシュ（記憶）の自動化
App Routerは、一度取得したデータを「サーバーに記憶（キャッシュ）」しておく能力が非常に高いです。
一度取得したデータはサーバーに保存され、2人目以降のユーザーには一瞬で表示されます。
「5分間だけキャッシュする」「データが更新された時だけ作り直す」といった細かい制御も簡単です。
例えば、1分間に1万人がアクセスするランキングサイトがあった場合、毎回データベースに問い合わせるとサーバーがパンクしてしまいます。
App Routerなら「1分間は最新の結果を覚えておく」という設定が1行で書けるため、2人目以降のユーザーには一瞬でデータを返せます。
