Next.js 15完全入門ガイド：App Routerで作るモダンWebアプリ2026年版

Next.js 15はReactベースのフルスタックWebフレームワークとして、2026年現在もフロントエンド開発のデファクトスタンダードとなっています。本記事では、App Routerを使ったモダンなWebアプリ開発の基礎から応用までを解説します。

Next.js 15の新機能

• Turbopack（安定版）：Webpackの700倍高速なバンドラー
• React 19対応：Server Componentsの完全安定化
• Partial Prerendering：静的と動的コンテンツの最適な組み合わせ
• 改善されたキャッシュ制御：より直感的なキャッシュAPI

プロジェクト作成

npx create-next-app@latest my-tech-blog --typescript --tailwind --app --src-dir

cd my-tech-blog
npm run dev

App Routerの基本構造

my-app/
├── src/
│   └── app/
│       ├── layout.tsx      # ルートレイアウト
│       ├── page.tsx        # ホームページ（/）
│       ├── about/
│       │   └── page.tsx    # /about
│       ├── blog/
│       │   ├── page.tsx    # /blog
│       │   └── [slug]/
│       │       └── page.tsx # /blog/[記事スラッグ]
│       └── api/
│           └── posts/
│               └── route.ts # API Route

Server ComponentsとClient Componentsの使い分け

// Server Component（デフォルト）- データフェッチに適している
// app/blog/page.tsx
async function BlogPage() {
  // サーバーサイドで直接DBやAPIを叩ける
  const posts = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 } // 1時間キャッシュ
  }).then(r => r.json());

  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

// Client Component - インタラクティブな機能に使う
'use client';
// components/SearchBar.tsx
import { useState } from 'react';

export function SearchBar({ onSearch }) {
  const [query, setQuery] = useState('');
  
  return (
    <input
      type="search"
      value={query}
      onChange={(e) => {
        setQuery(e.target.value);
        onSearch(e.target.value);
      }}
      placeholder="記事を検索..."
    />
  );
}

Metadata APIによるSEO最適化

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

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.coverImage }],
      type: 'article',
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
    }
  };
}

APIルート（Route Handlers）

// app/api/posts/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const category = searchParams.get('category');
  
  const posts = await getPosts({ category });
  return NextResponse.json(posts);
}

export async function POST(request: NextRequest) {
  const body = await request.json();
  const newPost = await createPost(body);
  return NextResponse.json(newPost, { status: 201 });
}

Vercelへのデプロイ

# Vercel CLIでデプロイ
npm install -g vercel
vercel

# または GitHub連携で自動デプロイ
# GitHubにpushするだけで自動的にデプロイされる

まとめ

Next.js 15のApp Routerは、パフォーマンスとDXの両立を高いレベルで実現しています。Server Componentsによるデータフェッチの簡素化、Turbopackによる高速ビルド、Metadata APIによるSEO最適化など、モダンなWebアプリ開発に必要なものが揃っています。今後のフロントエンド開発の中心として、ぜひ習得しておきたいフレームワークです。