Next.js 15完全ガイド：App RouterとServer Componentsで作るモダンWebアプリ

Next.js 15が革新するWebアプリ開発

Next.js 15は、Vercelが開発するReactベースのフルスタックWebフレームワークの最新バージョンです。App RouterとServer Componentsの成熟により、より直感的で高性能なWebアプリケーション開発が可能になりました。本記事では、Next.js 15の主要機能を実際のコード例を交えながら詳しく解説します。Reactの基本知識があれば、この記事を参考にモダンなWebアプリを構築できます。

App RouterとPages Routerの違い

Next.js 13で導入されたApp Routerは、Next.js 15でさらに成熟し、現在は主要な開発アプローチとして推奨されています。従来のPages Router（pagesディレクトリベース）と比較して、App Routerにはいくつかの大きな違いがあります。

App Routerでは、appディレクトリ内のpage.tsx（またはpage.js）ファイルが各URLルートに対応します。ネストされたディレクトリ構造がそのままURLパス構造となるため、直感的なルーティング管理が可能です。また、layout.tsx・loading.tsx・error.tsx・not-found.tsxなどの特殊ファイルにより、共有レイアウト・ローディング状態・エラーハンドリングを宣言的に管理できます。

// app/blog/[slug]/page.tsx の例
import { notFound } from 'next/navigation'

interface Props {
  params: { slug: string }
}

// サーバーコンポーネントとして動作（デフォルト）
export default async function BlogPost({ params }: Props) {
  const post = await fetchPost(params.slug)
  
  if (!post) {
    notFound() // 404ページを表示
  }
  
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  )
}

// メタデータの動的生成
export async function generateMetadata({ params }: Props) {
  const post = await fetchPost(params.slug)
  return {
    title: post?.title,
    description: post?.excerpt,
  }
}

Server ComponentsとClient Components

Server Componentsの活用

App RouterにおけるReact Server Components（RSC）は、サーバー側でのみレンダリングされるコンポーネントです。デフォルトでServer Componentとして動作するため、データベースへの直接アクセス、APIキーなどの機密情報の安全な使用、JavaScriptバンドルサイズの削減（クライアントにJSが送信されない）などのメリットがあります。

Server Componentsでは、asyncコンポーネントとしてデータフェッチを直接行うことができます。従来のuseEffect + fetchパターンと比較して、コードが大幅にシンプルになり、ウォーターフォール問題も解消されます。

Client Componentsの使いどころ

インタラクティブな機能（クリックイベント、状態管理、ブラウザAPIの使用）が必要な場合は、ファイルの先頭に’use client’ディレクティブを追加してClient Componentとして定義します。設計の基本原則として、可能な限りServer Componentを使い、ユーザーインタラクションが必要な最小限の部分のみをClient Componentにする「Leafコンポーネント戦略」が推奨されます。

// app/components/LikeButton.tsx
'use client' // クライアントコンポーネントを宣言

import { useState } from 'react'

export default function LikeButton({ postId }: { postId: string }) {
  const [liked, setLiked] = useState(false)
  const [count, setCount] = useState(0)
  
  const handleLike = async () => {
    setLiked(!liked)
    setCount(liked ? count - 1 : count + 1)
    // サーバーアクションを呼び出し
    await toggleLike(postId)
  }
  
  return (
    <button onClick={handleLike}>
      {liked ? '♥' : '♡'} {count}
    </button>
  )
}

Server Actionsによるフォーム処理

Next.js 15ではServer Actionsが安定版として提供されており、フォームの送信処理をAPIルートなしで直接サーバーサイドで処理できます。’use server’ディレクティブを付与した非同期関数として定義し、formのactionプロップやonClick・onSubmitから呼び出せます。

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

import { revalidatePath } from 'next/cache'

export async function submitContact(formData: FormData) {
  const name = formData.get('name') as string
  const email = formData.get('email') as string
  const message = formData.get('message') as string
  
  // バリデーション
  if (!name || !email || !message) {
    return { error: '全ての項目を入力してください' }
  }
  
  // データベースに保存 or メール送信
  await saveContactToDatabase({ name, email, message })
  
  // キャッシュを更新
  revalidatePath('/contact')
  
  return { success: '送信が完了しました' }
}

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

Next.js 15のキャッシュの変更点

Next.js 15ではキャッシュの動作が大きく変更されました。以前のバージョンではfetchがデフォルトでキャッシュされましたが、Next.js 15からはデフォルトで「キャッシュなし（no-store）」となりました。明示的にキャッシュを有効にするには、fetch関数のオプションとして{ cache: ‘force-cache’ }または{ next: { revalidate: 3600 } }（秒数指定のISR）を指定する必要があります。

Partial Prerendering（PPR）

Next.js 15の実験的機能として導入されたPartial Prerendering（PPR）は、同じページ内で静的コンテンツと動的コンテンツを最適に組み合わせる革新的な機能です。ページの静的な部分（ヘッダー・ナビゲーション・サイドバーなど）は即座に配信し、動的なコンテンツ（ユーザー固有のデータ・リアルタイムデータ）はStreaming（Suspense）を使って後から読み込むことで、初期表示速度と動的コンテンツの両立を実現します。

Turbopackによる高速開発環境

Next.js 15ではTurbopack（Rustベースのバンドラー）が開発環境（next dev）でデフォルトとなりました。WebpackベースのビルドシステムからTurbopackに切り替えることで、大規模プロジェクトでの開発サーバーの起動時間が最大5〜10倍速くなるとされています。ホットリロード（Fast Refresh）のレスポンスも大幅に改善されており、開発体験が向上しています。

Next.js 15プロジェクトのベストプラクティス

Next.js 15を使ったプロジェクトでは、いくつかのベストプラクティスを意識することで、保守性と性能の高いアプリケーションを構築できます。ディレクトリ構成は機能単位（Feature-based）で整理し、app配下に機能別のフォルダを作成して関連するコンポーネント・アクション・スタイルをまとめることが推奨されます。TypeScriptは必ず使用し、型安全性を確保することで開発時のエラー検出が格段に向上します。

また、パフォーマンス最適化として、next/imageコンポーネントを使った画像最適化（自動WebP変換・遅延読み込み）、next/fontを使ったフォントの最適化（レイアウトシフト防止）、動的インポート（next/dynamic）を使ったコードスプリッティングなどを積極的に活用しましょう。

まとめ

Next.js 15は、App RouterとServer Componentsの成熟により、より直感的で高性能なWebアプリ開発が可能なフレームワークに進化しました。Server Actionsによるシンプルなフォーム処理、Turbopackによる高速な開発環境、PPRによる最適なレンダリング戦略など、モダンWebアプリ開発に必要な機能が揃っています。

Reactの基本を習得したら、Next.jsを学ぶことがフロントエンドエンジニアのキャリアにおいて非常に価値があります。公式ドキュメント（nextjs.org/docs）はとても充実しているので、本記事の内容を参考にしながら、実際にプロジェクトを作って理解を深めることをお勧めします。