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

Next.js 15は、ReactのServer ComponentsとApp Routerを完全に活用した最新のフルスタックWebフレームワークです。2026年現在、最もモダンなWebアプリケーション開発のスタンダードとなっています。

Next.js 15の主な特徴

• App Router：ファイルベースのルーティングシステムで直感的な構成が可能
• Server Components：サーバー側でレンダリングしてSEOと初期表示速度を最適化
• Server Actions：フォーム処理やデータ変更をシンプルに実装
• Turbopack：Webpackの後継で開発サーバーの起動が大幅に高速化
• Partial Pre-rendering：静的コンテンツと動的コンテンツを効率的に組み合わせ

プロジェクトセットアップ

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

App Routerの基本構成

src/app/
├── layout.tsx        # ルートレイアウト
├── page.tsx          # ホームページ (/)
├── loading.tsx       # ローディングUI
├── error.tsx         # エラーUI
├── not-found.tsx     # 404ページ
├── blog/
│   ├── page.tsx      # ブログ一覧 (/blog)
│   └── [slug]/
│       └── page.tsx  # ブログ詳細 (/blog/:slug)
└── api/
    └── route.ts      # API Routes

Server ComponentsとClient Componentsの使い分け

Next.js App Routerの最大の特徴は、Server ComponentsとClient Componentsの使い分けです。

Server Actionsの実装例

// src/app/actions.ts
'use server'

import { db } from '@/lib/db'
import { revalidatePath } from 'next/cache'
import { redirect } from 'next/navigation'
import { z } from 'zod'

const CreatePostSchema = z.object({
  title: z.string().min(1).max(100),
  content: z.string().min(10),
  category: z.string(),
})

export async function createPost(formData: FormData) {
  const validatedData = CreatePostSchema.safeParse({
    title: formData.get('title'),
    content: formData.get('content'),
    category: formData.get('category'),
  })
  
  if (!validatedData.success) {
    return { errors: validatedData.error.flatten().fieldErrors }
  }

  const post = await db.post.create({
    data: {
      ...validatedData.data,
      publishedAt: new Date(),
    }
  })

  revalidatePath('/blog')
  redirect('/blog/' + post.slug)
}

API Routes（Route Handlers）

// src/app/api/posts/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { db } from '@/lib/db'

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams
  const page = parseInt(searchParams.get('page') ?? '1')
  const limit = parseInt(searchParams.get('limit') ?? '10')

  const [posts, total] = await Promise.all([
    db.post.findMany({
      skip: (page - 1) * limit,
      take: limit,
      orderBy: { publishedAt: 'desc' },
    }),
    db.post.count()
  ])

  return NextResponse.json({
    posts,
    pagination: { page, limit, total, totalPages: Math.ceil(total / limit) }
  })
}

export async function POST(request: NextRequest) {
  const body = await request.json()
  const post = await db.post.create({ data: body })
  return NextResponse.json(post, { status: 201 })
}

SEO最適化：動的メタデータ生成

// src/app/blog/[slug]/page.tsx
import type { Metadata } from 'next'

interface PageProps {
  params: Promise<{ slug: string }>
}

// 動的メタデータ生成（SEO最適化）
export async function generateMetadata({ params }: PageProps): Promise {
  const { slug } = await params
  const post = await getPost(slug)
  
  if (!post) return { title: 'Not Found' }
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.ogImage || '/default-og.png' }],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
    },
  }
}

Vercelへのデプロイ手順

1. GitHubにリポジトリをpushする
2. Vercel（vercel.com）にアクセスしてGitHubと連携する
3. プロジェクトをインポートして環境変数を設定する
4. 「Deploy」ボタンをクリックするだけで自動デプロイ完了
5. 以後、GitへのpushごとにCI/CDが自動実行される

まとめ

Next.js 15は2026年のWebアプリ開発のベストプラクティスを体現したフレームワークです。Server ComponentsによるSEO最適化、Server Actionsによるシンプルなフォーム処理、Vercelへのシームレスなデプロイ体験で、個人ブログからエンタープライズアプリまで幅広く対応できます。