Next.js 15 App Routerのサーバーコンポーネント完全ガイド

// app/products/page.tsx
// サーバーコンポーネント（デフォルト）

interface Product {
  id: number
  title: string
  price: number
}

async function getProducts(): Promise<Product[]> {
  // Next.js 15: デフォルトでno-store（キャッシュなし）
  const res = await fetch('https://api.example.com/products')

  if (!res.ok) {
    throw new Error('Failed to fetch products')
  }

  return res.json()
}

async function getCachedProducts(): Promise<Product[]> {
  // 1時間キャッシュ
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 }
  })

  if (!res.ok) {
    throw new Error('Failed to fetch products')
  }

  return res.json()
}

async function getStaticProducts(): Promise<Product[]> {
  // ビルド時のみ取得（ISRなし）
  const res = await fetch('https://api.example.com/products', {
    cache: 'force-cache'
  })

  return res.json()
}

export default async function ProductsPage() {
  const products = await getProducts()

  return (
    <main>
      <h1>製品一覧</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            {product.title} - ¥{product.price.toLocaleString()}
          </li>
        ))}
      </ul>
    </main>
  )
}

// app/dashboard/page.tsx
import { db } from '@/lib/db' // Prisma Client

export default async function DashboardPage() {
  // APIルートを経由せず直接DBクエリ
  const users = await db.user.findMany({
    select: {
      id: true,
      name: true,
      email: true,
      createdAt: true,
    },
    orderBy: { createdAt: 'desc' },
    take: 10,
  })

  return (
    <div>
      <h1>ダッシュボード</h1>
      <table>
        <thead>
          <tr>
            <th>名前</th>
            <th>メール</th>
            <th>登録日</th>
          </tr>
        </thead>
        <tbody>
          {users.map((user) => (
            <tr key={user.id}>
              <td>{user.name}</td>
              <td>{user.email}</td>
              <td>{user.createdAt.toLocaleDateString('ja-JP')}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

// components/ProductCard.tsx
// サーバーコンポーネント（"use client"なし）
import { AddToCartButton } from './AddToCartButton'

interface Product {
  id: number
  title: string
  price: number
}

interface ProductCardProps {
  product: Product
}

export function ProductCard({ product }: ProductCardProps) {
  return (
    <div className="border rounded-lg p-4">
      <h2>{product.title}</h2>
      <p>¥{product.price.toLocaleString()}</p>
      {/* クライアントコンポーネントを子として埋め込み */}
      <AddToCartButton productId={product.id} />
    </div>
  )
}

// components/AddToCartButton.tsx
'use client'

import { useState } from 'react'

interface AddToCartButtonProps {
  productId: number
}

export function AddToCartButton({ productId }: AddToCartButtonProps) {
  const [added, setAdded] = useState(false)

  return (
    <button
      onClick={() => setAdded(true)}
      className="bg-blue-600 text-white px-4 py-2 rounded"
    >
      {added ? 'カートに追加済み' : 'カートに追加'}
    </button>
  )
}

// app/dashboard/page.tsx
// 並列データフェッチの例
import { Suspense } from 'react'
import { UserStats } from './UserStats'
import { RecentOrders } from './RecentOrders'
import { RevenueChart } from './RevenueChart'

export default function DashboardPage() {
  return (
    <div className="grid grid-cols-3 gap-6">
      {/* 各コンポーネントが独立してデータをフェッチ */}
      <Suspense fallback={<div>統計を読み込み中...</div>}>
        <UserStats />
      </Suspense>

      <Suspense fallback={<div>注文を読み込み中...</div>}>
        <RecentOrders />
      </Suspense>

      <Suspense fallback={<div>グラフを読み込み中...</div>}>
        <RevenueChart />
      </Suspense>
    </div>
  )
}

// app/dashboard/UserStats.tsx
async function getUserCount(): Promise<number> {
  const res = await fetch('/api/users/count', {
    next: { revalidate: 60 }
  })
  const data = await res.json() as { count: number }
  return data.count
}

export async function UserStats() {
  const count = await getUserCount()
  return <div>ユーザー数: {count}</div>
}