Next.js 15完全入門ガイド【2026年版】App Router・Server Components・RSCを完全理解する

Next.js 15とは？App Routerが変えたフロントエンド開発

Next.jsはVercelが開発したReactフレームワークで、2026年現在のフロントエンド開発において最も人気のある選択肢の一つです。Next.js 15ではApp Routerが安定版となり、React Server Components（RSC）を中心とした新しいアーキテクチャが標準となっています。

プロジェクトの作成と基本構造

npx create-next-app@latest my-app --typescript --tailwind --eslint --app
cd my-app
npm run dev

App Routerのディレクトリ構造

app/
  layout.tsx       # ルートレイアウト
  page.tsx         # ホームページ
  loading.tsx      # ローディングUI
  error.tsx        # エラーUI
  not-found.tsx    # 404ページ
  api/
    route.ts       # APIルートハンドラー
  blog/
    page.tsx       # /blog
    [slug]/
      page.tsx     # /blog/[slug]
      generateStaticParams.ts

Server Components vs Client Components

App Routerの最大の特徴はReact Server Components（RSC）のデフォルト採用です。

// Server Component（デフォルト）
// 'use client'なし → サーバーで実行
async function BlogList() {
  // データベースに直接アクセス可能
  const posts = await db.posts.findMany();
  
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

// Client Component
'use client';
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

データフェッチングとキャッシュ戦略

// キャッシュなし（常に最新データ）
const data = await fetch('https://api.example.com/data', {
  cache: 'no-store'
});

// 静的キャッシュ（ビルド時に取得）
const data = await fetch('https://api.example.com/data', {
  cache: 'force-cache'
});

// 時間ベースの再検証（60秒ごと）
const data = await fetch('https://api.example.com/data', {
  next: { revalidate: 60 }
});

// タグベースの再検証
const data = await fetch('https://api.example.com/data', {
  next: { tags: ['posts'] }
});

// サーバーアクションで再検証
import { revalidateTag } from 'next/cache';
export async function createPost(formData) {
  await db.post.create({ data: ... });
  revalidateTag('posts');
}

Server ActionsとForm処理

// app/actions.ts
'use server'

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;
  
  await db.posts.create({ data: { title, content } });
  revalidatePath('/blog');
  redirect('/blog');
}

// app/new-post/page.tsx
export default function NewPostPage() {
  return (
    <form action={createPost}>
      <input name='title' required />
      <textarea name='content' required />
      <button type='submit'>投稿する</button>
    </form>
  );
}

まとめ：Next.js 15で最新のWebアプリを構築しよう

• ✅ Server ComponentsでパフォーマンスとSEOを最適化
• ✅ App Routerでファイルベースのルーティングを活用
• ✅ Server Actionsでシンプルなフォーム処理を実現
• ✅ キャッシュ戦略でデータフェッチングを最適化