Next.js 15完全入門｜App Router・React Server Components・パフォーマンス最適化まで

Next.js 15がリリースされ、React Server Components（RSC）の安定化やTurbopackのデフォルト採用など、多くの革新的な変更が加わりました。本記事では、Next.js 15の全機能を実践的なコードサンプルとともに徹底解説します。

Next.js 15の主要変更点

• React 19の正式サポート
• TurbopackがデフォルトのDevサーバーに昇格
• fetchキャッシュのデフォルト動作変更
• 非同期Request APIsの対応
• 新しいafter() API

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

# Next.js 15プロジェクトの作成
npx create-next-app@latest my-next15-app --typescript --tailwind --eslint

# Turbopackで高速開発
npm run dev --turbo

App RouterとServer Componentsの実践

Server Componentsでのデータフェッチ

// app/posts/page.tsx - Server Component（デフォルト）
// Next.js 15ではfetchのキャッシュがno-storeがデフォルトに変更

async function getPosts() {
  // Next.js 15: キャッシュを明示的に指定する必要がある
  const res = await fetch('https://api.example.com/posts', {
    cache: 'force-cache', // または next: { revalidate: 60 }
  });
  return res.json();
}

export default async function PostsPage() {
  const posts = await getPosts();
  
  return (
    <div>
      {posts.map((post: any) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </article>
      ))}
    </div>
  );
}

新しいafter() APIの活用

Next.js 15で追加されたafter() APIを使用すると、レスポンス送信後にコードを実行できます。ログ記録・アナリティクス送信・キャッシュ更新などに活用できます。

import { after } from 'next/server';

export default async function Page() {
  after(async () => {
    // レスポンス送信後に実行（ログ記録・分析送信など）
    await logPageView('/my-page');
  });

  return <main>コンテンツ</main>;
}

非同期Request APIs（Next.js 15新機能）

// Next.js 15では headers/cookies/params が非同期になった
import { headers, cookies } from 'next/headers';
import { type NextRequest } from 'next/server';

// ✅ Next.js 15の書き方（awaitが必要）
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;  // awaitが必要
  const headersList = await headers();  // awaitが必要
  const cookieStore = await cookies();  // awaitが必要
  
  return <div>Post ID: {id}</div>;
}

パフォーマンス最適化テクニック

1. 画像最適化

import Image from 'next/image';

// WebP自動変換・サイズ最適化・遅延読み込みが自動適用
export default function OptimizedImage() {
  return (
    <Image
      src="/hero-image.jpg"
      alt="ヒーロー画像"
      width={1200}
      height={600}
      priority  // LCP改善のため above-the-fold 画像に設定
      quality={85}
    />
  );
}

2. Parallel RoutesとIntercepting Routes

Parallel Routesを使用することで、同一レイアウト内に複数の独立したページを並列表示できます。ダッシュボードやモーダル表示に非常に有効です。

// app/@modal/(.)posts/[id]/page.tsx - Intercepting Routes
// URLが変わっても現在のページを維持しながらモーダルを表示
export default function PostModal({ params }: { params: { id: string } }) {
  return (
    <dialog open>
      <h2>記事詳細 #{params.id}</h2>
      {/* モーダルコンテンツ */}
    </dialog>
  );
}

Next.js 14からの移行ガイド

Next.js 14からNext.js 15への移行で特に注意すべき変更点は以下の3点です。

• fetchキャッシュのデフォルト変更：no-storeに変更されたため、キャッシュが必要な箇所は明示的に指定
• 非同期Request APIs：params・headers・cookies・searchParamsがPromiseに変更
• React 19の変更：一部のサードパーティライブラリとの互換性を確認

まとめ

Next.js 15は、Turbopackの高速化・React 19サポート・新しいAPIによる柔軟なデータ管理と大幅な進化を遂げています。特にServer Componentsとクライアントコンポーネントの使い分けをマスターすることで、パフォーマンスと開発体験の両立が実現できます。

関連記事：React 19新機能完全ガイド・TypeScript 5系新機能まとめもあわせてご覧ください。