Next.jsのApp Routerを徹底解説：最新のルーティングシステムを使いこなす

Next.js の App Router とは？

Next.js 13 から導入された「App Router」は、React の最新機能を活用した新しいアプリケーション構造とルーティングシステムです。従来の「Pages Router」と比較して、より React の思想に沿った設計になっています。

App Router の主な特徴

App Router は以下のような特徴を持っています：

• ディレクトリベースのルーティング: フォルダ構造がそのまま URL パスになる
• React サーバーコンポーネントのネイティブサポート: デフォルトですべてのコンポーネントがサーバーコンポーネント
• 入れ子レイアウト: 複数のページ間で共有される UI を簡単に実装
• データフェッチの簡素化: コンポーネントレベルでの非同期データフェッチ
• ストリーミング: ページの部分的な送信によるユーザー体験の向上

Pages Router から App Router への移行

Pages Router から App Router への移行はいくつかの重要な変更点があります：

1. ファイル構造の変更: pages/ ディレクトリから app/ ディレクトリへ
2. ファイル命名規則の変更: 特殊ファイル名（page.js, layout.jsなど）の導入
3. データフェッチの方法: getServerSideProps や getStaticProps から非同期コンポーネントへ

// Pages Routerでのデータフェッチ
export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();
  return { props: { data } };
}

// App Routerでのデータフェッチ
async function Page() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();
  return <div>{data.title}</div>;
}

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

App Router の最も重要な概念の一つが、サーバーコンポーネントとクライアントコンポーネントの区別です。

サーバーコンポーネント（デフォルト）

// これはサーバーコンポーネントです（デフォルト）
export default function ServerComponent() {
  return <div>サーバーでレンダリングされます</div>;
}

サーバーコンポーネントのメリット：

• データベースやファイルシステムへの直接アクセス
• API キーなどの機密情報を安全に使用可能
• クライアントへの JavaScript バンドルサイズが削減される

クライアントコンポーネント

"use client"; // これがクライアントコンポーネントの印です

import { useState } from "react";

export default function ClientComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>増加</button>
    </div>
  );
}

クライアントコンポーネントのユースケース：

• ユーザーイベント（onClick, onChange など）の処理
• ステート管理（useState, useReducer など）
• ブラウザ API の使用（localStorage, window など）
• ライフサイクルエフェクト（useEffect）

ルーティングとナビゲーション

App Router では、ナビゲーションの方法も変更されています：

// クライアントコンポーネントでのナビゲーション
"use client";

import { useRouter } from "next/navigation"; // 'next/router'ではなく'next/navigation'

export default function NavigationButton() {
  const router = useRouter();

  return (
    <button onClick={() => router.push("/dashboard")}>ダッシュボードへ</button>
  );
}

本記事はNext.js App Routerの入門（サーバー/クライアントコンポーネント・移行の型）に特化しています。実際の採用判断や移行範囲はプロジェクト・チームにより異なるため、Next.js選定・モダンWeb開発ガイド・TypeScriptとあわせて自社の前提に合わせた判断をおすすめします。

Next.js App Routerの要点と移行の型

App Router は、React の最新機能を活用し、パフォーマンスとデベロッパーエクスペリエンスを向上させる強力なフレームワークです。サーバーコンポーネントとクライアントコンポーネントの適切な使い分けにより、最適なアプリケーション構造を設計できます。

既存の Pages Router プロジェクトがある場合は、段階的な移行が可能です。新規プロジェクトでは、App Router の採用を強くお勧めします。

詳細については、Next.js 公式ドキュメントを参照してください。