【2026年版】Next.js 15完全ガイド｜App Router・Server Components・デプロイまで実践解説

Next.js 15は2025年リリースのReactフレームワーク最新版です。App Router・React Server Components・Turbopack（webpack比700倍高速）などの革新的な機能により、Webアプリ開発の常識を塗り替えています。

App Routerの基本構造

app/
  layout.tsx     # ルートレイアウト
  page.tsx       # トップページ
  loading.tsx    # ローディングUI
  error.tsx      # エラーUI
  blog/
    page.tsx     # ブログ一覧
    [slug]/
      page.tsx   # 記事詳細（動的ルート）
  api/
    route.ts     # APIエンドポイント

Server Componentsでデータフェッチ

// サーバーコンポーネント（デフォルト）
async function BlogList() {
  // DBに直接アクセス可能
  const posts = await db.post.findMany({ take: 10 });
  return (
    <ul>
      {posts.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

// Suspenseでストリーミング
export default function Page() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <BlogList />
    </Suspense>
  );
}

Server Actions（フォーム処理）

'use server'
import { revalidatePath, redirect } from 'next/navigation';

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

// フォームコンポーネント
export default function NewPost() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <textarea name="content" required />
      <button>投稿</button>
    </form>
  );
}

SEOメタデータの設定

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title + ' | Tech Athletes',
    description: post.excerpt,
    openGraph: {
      title: post.title,
      images: [{ url: post.ogImage }],
      type: 'article',
    },
    alternates: {
      canonical: 'https://tech-athletes.com/blog/' + params.slug,
    },
  };
}

まとめ

Next.js 15はApp RouterとServer Componentsにより、パフォーマンス・SEO・開発体験が大幅に向上。TypeScript・Prisma・Tailwind CSSと組み合わせて、モダンなWebアプリ開発を始めましょう。