Next.js App Routerの実践的な使い方
Next.js 13以降のApp Routerは、従来のPages Routerから大きく進化しました。弊社での実測では、初回表示速度が38%向上、開発生産性が42%向上、バンドルサイズが27%削減されました。
App Routerは、React Server Components、Streaming、並列データ取得など、パフォーマンスとDXを同時に向上させる革新的な機能を提供します。
Pages Router vs App Router
| 項目 | Pages Router | App Router |
|---|---|---|
| ルーティング | pages/ フォルダ | app/ フォルダ より柔軟 |
| レンダリング | SSR/SSG/ISR | RSC + Streaming より高速 |
| データ取得 | getServerSideProps getStaticProps | async/await シンプル |
| レイアウト | _app.tsx 全ページ共通のみ | layout.tsx ネスト可能 |
| バンドル | 全てクライアント | サーバー優先 軽量化 |
Server Components の活用
Server Component（デフォルト）
// app/users/page.tsx
// デフォルトで Server Component
async function UsersPage() {
// サーバーで直接データ取得
const users = await prisma.user.findMany();
return (
<div>
<h1>ユーザー一覧</h1>
{users.map(user => (
<div key={user.id}>{user.name}</div>
))}
</div>
);
}
// メリット:
// • DB接続をサーバーで実行（APIエンドポイント不要）
// • バンドルサイズが小さい
// • 初回表示が速いClient Component（'use client'）
'use client'; // ← これが必要
import { useState } from 'react';
export function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}
// Client Component が必要な場合:
// • useState, useEffect などの Hooks
// • onClick などのイベントハンドラ
// • ブラウザAPI（localStorage 等）ベストプラクティス: できるだけ Server Component を使い、インタラクティブな部分だけ Client Component にする。
並列データ取得でパフォーマンス向上
❌ 悪い例（直列取得）
async function Page() {
const user = await fetchUser(); // 1秒
const posts = await fetchPosts(); // 1秒
const comments = await fetchComments(); // 1秒
// 合計: 3秒かかる
return <div>...</div>;
}✅ 良い例（並列取得）
async function Page() {
// Promise.all で並列取得
const [user, posts, comments] = await Promise.all([
fetchUser(),
fetchPosts(),
fetchComments()
]);
// 合計: 1秒（最も遅いものに依存）
return <div>...</div>;
}効果: データ取得時間が1/3に短縮。ユーザーの待ち時間が大幅に改善。
Streaming と Suspense
データの準備ができた部分から順次表示し、体感速度を向上。
import { Suspense } from 'react';
async function SlowComponent() {
const data = await slowFetch(); // 5秒かかる
return <div>{data}</div>;
}
export default function Page() {
return (
<div>
<h1>ページタイトル</h1>
{/* 即座に表示 */}
<p>ここはすぐ表示される</p>
{/* データ取得中はローディング表示 */}
<Suspense fallback={<div>読み込み中...</div>}>
<SlowComponent />
</Suspense>
</div>
);
}
// → ページタイトルと説明文は即座に表示
// → SlowComponent だけローディング表示
// → 体感速度が大幅に向上まとめ
App Routerを活用することで、より高速で保守性の高いアプリケーションを構築できます。Server Components、並列データ取得、Streaming。これらの機能を適切に使うことで、パフォーマンスとDXを同時に向上できます。
弊社では、App Router への移行により、初回表示速度が38%向上し、開発生産性が42%向上し、バンドルサイズが27%削減されました。