Next.js入門｜App Routerの基本をわかりやすく解説

はじめに

「Next.jsを使う」と言われたとき、制作会社が何をしているのかを大まかに理解することは、発注側にとっても重要です。特に2023年以降の標準となった「App Router」は、旧来の「Pages Router」から大きく変わっており、モダンなNext.js開発の核心です。

本記事では、Next.jsのApp Routerの概念・ディレクトリ構造・サーバー/クライアントコンポーネントの考え方を、エンジニア向けの詳細は省きつつ、全体像が把握できるレベルで解説します。

App Routerとは

App Routerは、Next.js 13（2022年）で導入され、Next.js 14・15で安定版となったNext.jsの新しいルーティング・レンダリングシステムです。

従来の「Pages Router」と何が違うのか、一言で言えば「React Server Componentsを活用した、よりパフォーマンスに優れた設計が可能になった」ことです。

ファイルベースルーティング

Next.jsの特徴の一つが「ファイルベースルーティング」です。URLとファイルの配置が1対1で対応します。

App Routerのディレクトリ構造

ファイルを作るだけでページができます。URLに対応するディレクトリ・ファイルを作成するのがNext.jsの基本的な作業です。

主要なファイルの役割

layout.tsx（レイアウト）

ヘッダー・フッター・ナビゲーションなど、複数のページで共有するUIを定義するファイルです。

app/layout.tsxはサイト全体に適用されるルートレイアウトです。app/blog/layout.tsxを作れば、ブログセクション全体に適用するレイアウトを定義できます。

実現できること：ヘッダー・フッターを一箇所で管理・サイドバーの共通化・認証が必要なセクションのまとめたレイアウト設計

page.tsx（ページ）

各URLに対応するページのコンテンツを定義するファイルです。

loading.tsx（ローディング）

データを取得中に表示するローディングUIを定義するファイルです。ReactのSuspenseを自動で活用します。

error.tsx（エラー）

エラーが発生したときに表示するUIを定義するファイルです。

not-found.tsx（404）

ページが見つからないときに表示するUIを定義するファイルです。

サーバーコンポーネントとクライアントコンポーネント

App Routerで最も重要な概念の一つが、Server Components（サーバーコンポーネント）とClient Components（クライアントコンポーネント）の使い分けです。

Server Components（デフォルト）

App Routerでは、すべてのコンポーネントがデフォルトでServer Componentsです。サーバー上で実行され、HTMLを生成してクライアントに送る。

特徴

• データベース・APIに直接アクセスできます

• async/awaitでデータを取得できます

• JavaScriptがブラウザに送られない（バンドルサイズ削減）

• useState・useEffect等のReact Hooksは使えない

• ボタンのクリックイベント等のブラウザインタラクションを持てない

向いているコンポーネント

• データを表示するだけのコンポーネント（記事一覧・製品情報等）

• CMSからデータを取得して表示するコンポーネント

• SEOに重要なメインコンテンツ

Client Components（`'use client'`）

ファイルの先頭に'use client'と書くことで、そのコンポーネントはクライアントコンポーネントになります。ブラウザ上でJavaScriptが実行されます。

特徴

• useState・useEffect等のReact Hooksが使える

• ブラウザのイベント（クリック・入力等）に反応できます

• ブラウザのAPI（localStorage・位置情報等）にアクセスできます

向いているコンポーネント

• 検索フォーム・フィルター機能

• インタラクティブなUIコンポーネント（モーダル・アコーディオン等）

• リアルタイムで更新されるデータの表示

• AIチャットUIのストリーミング表示

実践的な使い分けのパターン

「ページの大部分はServer Components、インタラクティブな部分だけClient Components」というのがApp Routerの基本パターンです。

データ取得の仕組み

App RouterのServer Componentsでは、コンポーネントの中でデータを直接取得できます。

ヘッドレスCMSからデータを取得する例（概念的な説明）

Orizmのようなヘッドレスとの連携では、このServer Componentがヘッドレスから記事データを取得し、レンダリングするという流れが自然に実現できます。

Metadata API（SEO設定）

App Routerでは、各ページのSEO設定（タイトル・メタディスクリプション・OGP等）をmetadataオブジェクトで管理します。

各ページでmetadataを定義するだけで、タイトルタグ・メタディスクリプション・OGPがページごとに自動的に設定されます。CMSのコンテンツからメタデータを動的に生成することも可能です。

App Routerを採用するメリット

発注側の視点から、App Routerを採用した制作の利点をまとめる。

パフォーマンス

Server ComponentsによるJavaScriptバンドルサイズの削減、データ取得の効率化で、Core Web VitalsのスコアがPages Routerより高くなりやすい。

開発効率

レイアウトの共通化・ローディング/エラー処理の標準化・Server ActionsによるAPIの簡略化で、開発効率が上がる。

将来性

VercelがApp Routerを中心に開発を進めており、新機能・最適化がApp Routerを前提として設計されています。長期的な保守性が高いです。

発注時の確認ポイント

制作会社にNext.jsでの開発を依頼する際に確認すべき点を示す。

• 「App RouterとPages Router、どちらを採用しますか？」（新規プロジェクトはApp Routerが正解）

• 「Server ComponentsとClient Componentsの使い分けはどのように設計しますか？」（明確に説明できる会社を選ぶ）

• 「ヘッドレスCMSとのISRの設定はどのように行いますか？」（コンテンツ更新の仕組みを確認）

まとめ

Next.jsのApp Routerは、ファイルベースルーティング・Server/Client Componentsの使い分け・Metadata APIによるSEO設定を組み合わせた、モダンなWebサイト構築の標準フレームワークです。

Server Componentsをデフォルトとしてデータを効率的に取得し、インタラクティブな部分だけClient Componentsを使うという設計パターンが、高パフォーマンスなWebサイトの基本です。

次の記事では、Next.jsと並ぶ有力なフレームワーク「Astro」の特徴と使い分けを解説します。