1. App Routerって何が違うの？

Next.js 13で大きな話題になった「App Router」。これは従来のPages Routerから進化した新しいルーティングシステムで、React Server Components（RSC）を前提に設計されています。従来はpages/ディレクトリでルーティング管理をしていましたが、App Routerではapp/ディレクトリをベースに、より柔軟でスケーラブルな設計が可能になりました。たとえば、レイアウトの共通化やネストされたルートに対するコード分割がシンプルに書けるのが特徴です。

2. ディレクトリ構成の変化に注目！

App Routerでは、URLとディレクトリ構造が密接に結びついています。たとえば、以下のような構成が一般的です。

app/
├── layout.tsx
├── page.tsx
└── dashboard/
    ├── layout.tsx
    └── page.tsx

ここで重要なのが、layout.tsx がそれぞれの階層で共通のレイアウトを提供すること。これにより、親コンポーネントの再描画を抑えつつ、子コンポーネントだけ差し替えるUIが実現できます。UXの向上にもつながるポイントですね。

3. 構築例：簡易ダッシュボードを作ってみよう

実際にApp Routerを使って、ログイン後に表示されるダッシュボードを構築した例を紹介します。認証後にユーザー情報とグラフを表示するシンプルなUIです。

tsx

// app/dashboard/page.tsx
import { getUserData } from '@/lib/user'
import Chart from '@/components/Chart'

export default async function DashboardPage() {
  const user = await getUserData()

  return (
    <div>
      <h1>こんにちは、{user.name}さん</h1>
      <Chart data={user.activity} />
    </div>
  )
}

このように、page.tsx はサーバーコンポーネントとして動作するため、getUserData のような非同期処理もシンプルに書けます。API呼び出しの処理がクライアント側に露出しないので、セキュリティ面でもメリットがあります。

4. クライアント側のインタラクションもスマートに

Next.js 13では"use client"ディレクティブでクライアントコンポーネントを明示します。たとえば、ボタンのクリックでモーダルを開くようなインタラクションは、次のように記述します。

tsx

// app/components/ModalButton.tsx
'use client'

import { useState } from 'react'

export default function ModalButton() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button onClick={() => setOpen(true)}>詳細を見る</button>
      {open && <div>モーダルの中身です</div>}
    </>
  )
}

このように、必要な箇所だけクライアント化することで、全体のパフォーマンスを維持しつつリッチな体験を実現できます。

5. 実運用で気をつけるべきポイント

App Routerは強力ですが、現状ではライブラリ側の対応が追いついていないこともあります。たとえば、フォームバリデーションやSEOの記述が若干複雑になるケースも。とはいえ、それ以上に恩恵の多い新機能が魅力ですので、段階的な移行やチームでの検証を進めながら導入していくのがおすすめです。

App RouterはNext.jsを新しいレベルに引き上げる進化です。慣れるまでに少し時間はかかりますが、構築の自由度やパフォーマンス面のメリットを考えれば、今から取り組む価値は大いにあります。これからフロントエンド開発を始めるなら、ぜひApp Routerでの構築を試してみてください！