Next.js 15 完全入門ガイド｜App Router・Server Components・Turbopackを使いこなす

Next.js 15とは？なぜ注目されているのか

Next.jsはVercelが開発するReactベースのフルスタックWebフレームワークです。2024年後半にリリースされたNext.js 15では、Turbopackのstable化、Server Actionsの大幅な改善、そして部分的プリレンダリング（PPR）の強化が行われました。本記事では実践的なコード例を交えながら、最新のNext.jsの使い方を解説します。

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

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

# ディレクトリ移動と起動
cd my-app
npm run dev

# Turbopackを使った高速開発
npm run dev -- --turbopack

App Routerの基本構造

Next.js 13以降に導入されたApp Routerは、従来のPages Routerを置き換える新しいルーティングシステムです。app/ディレクトリ内でファイルベースのルーティングを行います。

app/
├── layout.tsx          # ルートレイアウト（全ページ共通）
├── page.tsx            # トップページ (/)
├── loading.tsx         # ローディングUI
├── error.tsx           # エラーUI
├── blog/
│   ├── page.tsx        # ブログ一覧 (/blog)
│   └── [slug]/
│       └── page.tsx    # 記事詳細 (/blog/[slug])
├── api/
│   └── posts/
│       └── route.ts    # APIエンドポイント
└── (auth)/
    ├── login/
    │   └── page.tsx
    └── register/
        └── page.tsx

Server ComponentsとClient Components

Server Components（デフォルト）

App Router内のコンポーネントはデフォルトでServer Componentsです。サーバー側でのデータフェッチが可能で、JavaScriptバンドルサイズを削減できます。

// app/blog/page.tsx - Server Component
import { Suspense } from 'react'

// サーバーサイドでのデータフェッチ（直接awaitが使える）
async function BlogList() {
  const posts = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 } // 1時間ごとに再検証
  }).then(r => r.json())
  
  return (
    <ul>
      {posts.map((post: Post) => (
        <li key={post.id}>
          <a href={"/blog/" + post.slug}>{post.title}</a>
        </li>
      ))}
    </ul>
  )
}

export default function BlogPage() {
  return (
    <main>
      <h1>ブログ一覧</h1>
      <Suspense fallback={<div>読み込み中...</div>}>
        <BlogList />
      </Suspense>
    </main>
  )
}

Client Components（インタラクティブUI）

'use client' // これを先頭に書くとClient Componentになる

import { useState, useEffect } from 'react'

export function SearchBox() {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState([])
  
  useEffect(() => {
    if (query.length < 2) return
    const timer = setTimeout(() => {
      fetch("/api/search?q=" + query)
        .then(r => r.json())
        .then(setResults)
    }, 300) // デバウンス処理
    
    return () => clearTimeout(timer)
  }, [query])
  
  return (
    <div>
      <input
        type="search"
        value={query}
        onChange={e => setQuery(e.target.value)}
        placeholder="記事を検索..."
      />
      <ul>
        {results.map((r: any) => (
          <li key={r.id}>{r.title}</li>
        ))}
      </ul>
    </div>
  )
}

Server Actions：フォーム処理の革命

Server Actionsを使うと、APIルートを作らずにサーバー側の処理を直接呼び出せます。Next.js 15ではServer Actionsがさらに安定し、フォーム処理が劇的にシンプルになりました。

// app/contact/page.tsx
'use server'

async function sendContactForm(formData: FormData) {
  'use server' // 関数レベルでServer Actionを宣言
  
  const name = formData.get('name') as string
  const email = formData.get('email') as string
  const message = formData.get('message') as string
  
  // データベースへの保存
  await db.contact.create({ data: { name, email, message } })
  
  // メール送信
  await sendEmail({ to: 'admin@example.com', subject: "お問い合わせ: " + name, body: message })
  
  // revalidate
  revalidatePath('/contact')
}

export default function ContactPage() {
  return (
    <form action={sendContactForm}>
      <input name="name" type="text" required />
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button type="submit">送信</button>
    </form>
  )
}

パフォーマンス最適化のポイント

• 画像最適化：next/imageコンポーネントを使い、WebP変換・遅延ロードを自動化
• フォント最適化：next/fontでGoogleフォントをゼロCLS（レイアウトシフト）で読み込む
• コード分割：動的インポート（dynamic()）で初期バンドルサイズを削減
• Turbopack：Webpackの代替として、開発サーバーの起動を最大10倍高速化

まとめ

Next.js 15はReactフルスタック開発の決定版フレームワークです。Server Components・Server Actions・Turbopackを組み合わせることで、パフォーマンスと開発体験の両立が実現できます。ぜひ実際にプロジェクトを作成して、その快適さを体験してみてください。