Next.js 15 App Router マスターガイド — Server Componentsベストプラクティス

Next.js 15のApp RouterはReact Server Componentsを中心とした新しいパラダイムです。2026年時点でプロダクションで検証されたベストプラクティスをまとめます。

1. ファイルシステム構造

app/
  layout.tsx           # ルートレイアウト（必須）
  page.tsx             # ホーム /
  loading.tsx          # ローディングUI
  error.tsx            # エラーバウンダリ
  not-found.tsx        # 404
  (marketing)/         # ルートグループ（URL影響なし）
    page.tsx
  blog/
    [slug]/
      page.tsx         # /blog/xxx
  api/
    route.ts           # RESTエンドポイント

ルートグループ (group)：URLの構造に影響を与えずにレイアウトを共有するために使用します。

2. ServerとClientコンポーネント

サーバーがデフォルトです。 コンポーネントがクライアントコンポーネントとして扱われるには、明示的に "use client" を宣言する必要があります。

// サーバーコンポーネント（デフォルト）
async function Page() {
  const user = await fetchUser()  // サーバー上で直接フェッチ
  return <ProfileCard user={user} />
}

// クライアントコンポーネント
"use client"
function InteractiveButton() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

バウンダリの原則

• "use client" はコンポーネントツリーの最も下位の葉に配置する
• 上位コンポーネントはサーバーコンポーネントに保つ
• プロップスとして渡す値はシリアライズ可能である必要がある（JSON互換の型のみ）

3. データフェッチ

// 並列フェッチ
async function Page({ params }) {
  const [user, posts] = await Promise.all([
    fetchUser(params.id),
    fetchPosts(params.id),
  ])
  return <Dashboard user={user} posts={posts} />
}

自動fetchキャッシュ：

• fetch(url) — デフォルトキャッシュを使用
• fetch(url, { cache: "no-store" }) — リクエストのたびに再フェッチ
• fetch(url, { next: { revalidate: 60 } }) — ISR、60秒ごとに再検証

4. Suspense + ストリーミング

import { Suspense } from "react"

export default function Page() {
  return (
    <>
      <FastSection />
      <Suspense fallback={<Skeleton />}>
        <SlowSection />
      </Suspense>
    </>
  )
}

async function SlowSection() {
  await new Promise(r => setTimeout(r, 2000))
  return <div>完了</div>
}

遅いセクションのみがストリーミングされ、TTFBが即座に改善されます。

5. サーバーアクション

// app/actions.ts
"use server"
export async function createPost(formData: FormData) {
  const title = formData.get("title") as string
  await db.insert(posts).values({ title })
  revalidatePath("/blog")
}

// app/blog/new/page.tsx
import { createPost } from "../actions"
export default function NewPost() {
  return <form action={createPost}>...</form>
}

REST APIなしでサーバーロジックを直接呼び出すことができ、CSRF保護は自動で処理されます。

6. エラーバウンダリ

// app/blog/error.tsx
"use client"
export default function Error({ error, reset }) {
  return (
    <div>
      <p>{error.message}</p>
      <button onClick={reset}>リトライ</button>
    </div>
  )
}

セグメントレベルのエラーバウンダリにより、1つのパーツでエラーが発生しても残りのページは正常に機能します。

7. メタデータとSEO

export const metadata = {
  title: "マイページ",
  description: "...",
}

// または動的に設定
export async function generateMetadata({ params }) {
  const post = await fetchPost(params.slug)
  return { title: post.title }
}

10のベストプラクティス

1. 1サーバーをデフォルトに："use client" は本当に必要な場合のみ使用
2. 2できるだけ上位でデータを取得：プロップスドリリングを避ける
3. 3Suspenseを積極活用：ストリーミングでTTFBを最大化
4. 4fetch + revalidate：Redisなしで自動キャッシュ
5. 5サーバーアクション：RESTを置き換えてボイラープレートを削減
6. 6dynamic = force-dynamic：パーソナライズドページのみに使用
7. 7画像最適化： コンポーネントは必須
8. 8フォント最適化：next/font を使用
9. 9import server-only：センシティブなコードがクライアントに漏れるのを防ぐ
10. 10パラレルルーツ：複雑なダッシュボードには @slot を使用

よくある間違い

• サーバーコンポーネントで useState を使用 → エラーが発生
• クライアントコンポーネントで fetch を使用 → パフォーマンス低下（サーバーサイドフェッチが推奨）
• プロップスとして関数またはDateを渡す → シリアライゼーションエラー
• "use client" ファイルから非同期サーバーコンポーネントをインポート → 混乱を招く可能性

💡 実践的な洞察

多くのブログは「App Routerは素晴らしい、Server Componentsを使おう」で止まっていますが、プロダクション環境での重要な考慮点はCloudflare Pages / Vercel Edgeランタイムの互換性です。OpenNextでMillionsCode（18ツールサイト）を6ヶ月運営した経験から、RootLayoutや誤ったルートに export const runtime = 'edge' を配置すると即座にホワイトスクリーンが発生することが確認されています。最も安全なアプローチは設定せずにOpenNextが自動処理することです。2024年のnpmトレンドでは、App Routerの採用がPages Routerを上回っています（67% vs 33%）。新規プロジェクトではApp Routerが明確な推奨です。

まとめ

App Routerには初期の学習曲線がありますが、習得するとSPAとSSRの両方のメリットが得られる開発体験になります。2026年のNext.jsの新規プロジェクトはApp Router一択です。Pages Routerは移行対象です。

参考： Cloudflare Developer Documentation

よくある質問（FAQ）

Q1. Next.js 15 App Routerで何が変わりましたか？ A. アプリ構造がServer Components・ネストされたレイアウト・ストリーミング・データキャッシュを中心に再設計されました。

Q2. App RouterとPages Router、どちらを使うべきですか？ A. 新規プロジェクトではApp Routerがデフォルトです。既存サービスはルートごとに段階的に移行するのが最も現実的です。

Q3. Server Componentsのベストプラクティスは何ですか？ A. コンポーネントはデフォルトでサーバーコンポーネントに保ち、インタラクティビティが必要な部分のみクライアントコンポーネントとして切り出してください。

Q4. Next.js App Routerでデータをフェッチするにはどうすればよいですか？ A. サーバーコンポーネントで直接フェッチし、キャッシュ・再検証・Suspenseバウンダリを明示的に設定してください。

Q5. App Routerへの移行でよくある問題は何ですか？ A. クライアントフックの配置・グローバル状態管理・メタデータの処理・キャッシュの挙動・ルーティング構造の変更などが代表的です。

Q6. Next.js 15のパフォーマンス最適化のポイントは何ですか？ A. サーバーレンダリングの境界・画像最適化・キャッシュ戦略・バンドル分析・ストリーミングUXをまとめて調整することが重要です。