Next.js: サーバーアクション応用

// app/tasks/[id]/Attachments.tsx — 楽観的更新 + ファイルアップロード
'use client'
import { useOptimistic, useActionState } from 'react'
import { uploadAttachment } from './actions'

export function Attachments({ taskId, initialFiles }: Props) {
  const [optimisticFiles, addOptimistic] = useOptimistic(
    initialFiles,
    (state, newFile: File) => [...state, { id: 'pending', name: newFile.name, url: URL.createObjectURL(newFile), status: 'uploading' }]
  )

  const [error, formAction, pending] = useActionState(uploadAttachment, null)

  return (
    <form action={formAction}>
      <input type="hidden" name="taskId" value={taskId} />
      <input type="file" name="file" onChange={e => {
        const file = e.target.files?.[0]
        if (file) addOptimistic(file)  // UI に即時表示
      }} />
      <button type="submit" disabled={pending}>アップロード</button>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <ul>{optimisticFiles.map(f => <li key={f.id}>{f.name} {f.status === 'uploading' ? '⏳' : '✅'}</li>)}</ul>
    </form>
  )
}

// app/error-demo/use-action-state.tsx
'use client'
import { useActionState } from 'react'

async function submitOrder(prevState: any, formData: FormData) {
  'use server'
  try {
    const quantity = Number(formData.get('quantity'))
    if (quantity < 1) throw new Error('数量は1以上である必要があります')
    if (quantity > 100) throw new Error('数量が上限を超えています')

    await db.order.create({ data: { quantity } })
    revalidateTag('orders')
    return { success: true, message: '注文が作成されました' }
  } catch (err: any) {
    return { success: false, error: err.message }
  }
}

export default function OrderForm() {
  const [state, action, pending] = useActionState(submitOrder, null)

  return (
    <form action={action}>
      <input type="number" name="quantity" min={1} disabled={pending} />
      <button type="submit" disabled={pending}>{pending ? '送信中...' : '送信'}</button>
      {state?.error && <p style={{ color: 'red' }}>{state.error}</p>}
      {state?.success && <p style={{ color: 'green' }}>{state.message}</p>}
    </form>
  )
}

// app/error-demo/transition.tsx
'use client'
import { useTransition } from 'react'
import { submitFeedback } from './actions'

export function FeedbackForm() {
  const [isPending, startTransition] = useTransition()

  return (
    <form onSubmit={e => {
      e.preventDefault()
      const form = e.currentTarget
      const data = new FormData(form)
      startTransition(async () => {
        try {
          await submitFeedback(data)
          form.reset()
        } catch (err) {
          alert(`エラー: ${err}`)
        }
      })
    }}>
      <textarea name="feedback" required disabled={isPending} />
      <button type="submit" disabled={isPending}>
        {isPending ? '送信中...' : 'フィードバックを送信'}
      </button>
    </form>
  )
}

// app/actions/robust-action.ts
'use server'
import { revalidatePath } from 'next/cache'

export async function robustAction(formData: FormData) {
  const id = formData.get('id') as string

  // 1. パラメータ検証
  if (!id || isNaN(Number(id))) {
    throw new Error('無効な ID です')
  }

  // 2. ビジネスロジック + エラー処理
  try {
    await db.item.update({ where: { id: Number(id) }, data: { status: 'processed' } })
    revalidatePath('/items')
    return { ok: true }
  } catch (dbError) {
    console.error('データベースエラー:', dbError)
    throw new Error('データベースのアイテム更新に失敗しました')
  }
}

サーバーアクションが実行され、revalidatePath() を呼び出してページキャッシュを更新します。

// app/error-comparison/page.tsx
import { revalidatePath } from 'next/cache'

// パターン1: サーバーアクション内 try-catch + 戻り値
async function createItem(formData: FormData) {
  'use server'
  try {
    const name = formData.get('name') as string
    if (!name || name.length < 2) return { error: '名前が短すぎます' }
    await fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', body: JSON.stringify({ title: name }) })
    revalidatePath('/error-comparison')
    return { success: true }
  } catch (err) {
    return { error: 'ネットワークエラー' }
  }
}

export default function ErrorComparisonPage() {
  return (
    <div style={{ display: 'grid', gap: 32, padding: 24 }}>
      <section>
        <h2>パターン1: サーバーアクションが状態を返す</h2>
        <form action={createItem}>
          <input name="name" required />
          <button type="submit">作成</button>
        </form>
      </section>
    </div>
  )
}

フォームフィールド: name。送信時、データを処理し、ページキャッシュを更新します。
表示内容: Pattern 1: Server Action return state | Create

参加者間のメッセージフローを示すシーケンス図。

// app/todos/optimistic-list.tsx
'use client'
import { useOptimistic } from 'react'
import { revalidatePath } from 'next/cache'

type Todo = { id: number; title: string; completed: boolean }

export function OptimisticTodoList({ todos: initialTodos }: { todos: Todo[] }) {
  const [todos, addOptimistic] = useOptimistic(
    initialTodos,
    (state, updatedTodo: Todo) =>
      state.map(t => t.id === updatedTodo.id ? { ...t, completed: !t.completed } : t)
  )

  return (
    <ul>{todos.map(todo => (
      <li key={todo.id} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
        {todo.title}
        <form action={async (formData: FormData) => {
          'use server'
          const id = Number(formData.get('id'))
          await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`, {
            method: 'PATCH', body: JSON.stringify({ completed: true })
          })
          revalidatePath('/todos/optimistic')
        }} onSubmit={e => {
          // 楽観的更新: フォーム送信前に UI を即時更新
          addOptimistic({ ...todo, completed: !todo.completed })
        }}>
          <input type="hidden" name="id" value={todo.id} />
          <button type="submit">{todo.completed ? '元に戻す' : '完了'}</button>
        </form>
      </li>
    ))}</ul>
  )
}

送信時、データを処理し、ページキャッシュを更新します。

// app/actions/upload.ts
'use server'
import { revalidateTag } from 'next/cache'
import { writeFile } from 'node:fs/promises'
import { join } from 'node:path'

const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/webp', 'application/pdf']
const MAX_SIZE = 5 * 1024 * 1024  // 5 MB

export async function uploadAvatar(prevState: any, formData: FormData) {
  const file = formData.get('avatar') as File | null
  if (!file) return { error: 'ファイルが選択されていません' }

  // 型検証
  if (!ALLOWED_TYPES.includes(file.type)) {
    return { error: '無効なファイルタイプです。許可: JPEG, PNG, WebP, PDF' }
  }

  // サイズ検証
  if (file.size > MAX_SIZE) {
    return { error: `ファイルが大きすぎます。最大サイズ: ${MAX_SIZE / 1024 / 1024} MB` }
  }

  try {
    const bytes = await file.arrayBuffer()
    const buffer = Buffer.from(bytes)
    const filename = `${Date.now()}-${file.name.replace(/\s/g, '_')}`
    const path = join('public/uploads', filename)
    await writeFile(path, buffer)

    // データベースに保存
    await db.avatar.create({ data: { filename, path: `/uploads/${filename}` } })
    revalidateTag('avatars')
    return { success: true, url: `/uploads/${filename}` }
  } catch (err) {
    return { error: 'ファイルのアップロードに失敗しました' }
  }
}

// app/profile/avatar-upload.tsx
'use client'
import { useActionState } from 'react'
import { uploadAvatar } from '@/app/actions/upload'

export function AvatarUpload() {
  const [state, action, pending] = useActionState(uploadAvatar, null)

  return (
    <form action={action}>
      <input type="file" name="avatar" accept="image/jpeg,image/png,image/webp" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? 'アップロード中...' : 'アバターをアップロード'}
      </button>
      {state?.error && <p style={{ color: 'red' }}>{state.error}</p>}
      {state?.success && state?.url && (
        <div>
          <p style={{ color: 'green' }}>アップロード成功!</p>
          <img src={state.url} alt="avatar" style={{ width: 100, height: 100, borderRadius: '50%' }} />
        </div>
      )}
    </form>
  )
}

// app/actions/multi-upload.ts
'use server'
import { revalidateTag } from 'next/cache'

export async function uploadGallery(prevState: any, formData: FormData) {
  const files = formData.getAll('photos') as File[]
  if (files.length === 0) return { error: 'ファイルが選択されていません' }
  if (files.length > 10) return { error: '最大10ファイルまで許可' }

  const uploaded: string[] = []
  for (const file of files) {
    if (file.size > 5 * 1024 * 1024) continue
    const bytes = await file.arrayBuffer()
    const buffer = Buffer.from(bytes)
    const filename = `${Date.now()}-${file.name}`
    await writeFile(join('public/uploads', filename), buffer)
    uploaded.push(`/uploads/${filename}`)
  }

  revalidateTag('gallery')
  return { success: true, urls: uploaded }
}

uploadGallery コンポーネントの UI をレンダリングします。

// app/upload-demo/page.tsx — ファイルアップロード概要
import { revalidatePath } from 'next/cache'
import { writeFile } from 'node:fs/promises'
import { join } from 'node:path'
import fs from 'node:fs'

export default async function UploadDemoPage() {
  // 既存ファイルの一覧を読み取り
  const uploadDir = join(process.cwd(), 'public', 'uploads')
  const files = fs.existsSync(uploadDir) ? fs.readdirSync(uploadDir) : []

  return (
    <div style={{ maxWidth: 600, margin: '0 auto', padding: 24 }}>
      <h1>ファイルアップロードデモ</h1>

      <form action={async (formData: FormData) => {
        'use server'
        const file = formData.get('file') as File
        if (!file) return

        if (file.size > 2 * 1024 * 1024) {
          return { error: 'ファイルが大きすぎます (最大 2MB)' }
        }

        const bytes = await file.arrayBuffer()
        const buffer = Buffer.from(bytes)
        const filename = `${Date.now()}-${file.name}`
        await writeFile(join('public/uploads', filename), buffer)
        revalidatePath('/upload-demo')
      }}>
        <input type="file" name="file" required />
        <button type="submit">アップロード</button>
      </form>

      <div style={{ marginTop: 24 }}>
        <h2>アップロード済みファイル ({files.length})</h2>
        <ul>{files.map(f => (
          <li key={f}>
            <a href={`/uploads/${f}`} target="_blank">{f}</a>
          </li>
        ))}</ul>
      </div>
    </div>
  )
}

送信時、データを処理し、ページキャッシュを更新します。
表示内容: File Upload Demo

参加者間のメッセージフローを示すシーケンス図。

// app/posts/create/page.tsx — 書き込み + キャッシュ無効化 + リダイレクト
import { revalidateTag } from 'next/cache'
import { redirect } from 'next/navigation'
import { z } from 'zod'

const postSchema = z.object({
  title: z.string().min(5).max(200),
  content: z.string().min(20),
  published: z.coerce.boolean().default(false),
})

export default function CreatePostPage() {
  return (
    <form action={async (formData: FormData) => {
      'use server'
      // 1. 検証
      const validated = postSchema.safeParse({
        title: formData.get('title'),
        content: formData.get('content'),
        published: formData.get('published'),
      })
      if (!validated.success) return { errors: validated.error.flatten().fieldErrors }

      // 2. データベースに書き込み
      const post = await fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        body: JSON.stringify({
          title: validated.data.title,
          body: validated.data.content,
          userId: 1,
        })
      }).then(r => r.json())

      // 3. キャッシュ無効化
      revalidateTag('posts')
      revalidatePath('/posts')

      // 4. 新しい記事にリダイレクト
      redirect(`/posts/${post.id}`)
    }}>
      <div><input name="title" required placeholder="投稿タイトル" /></div>
      <div><textarea name="content" required placeholder="内容" rows={10} /></div>
      <div><label><input name="published" type="checkbox" value="true" /> 公開</label></div>
      <button type="submit">投稿を作成</button>
    </form>
  )
}

送信時、サーバーサイドでデータを処理し、リダイレクトします。

// app/tasks/[id]/page.tsx — サーバーアクション応用総合
import { revalidateTag } from 'next/cache'
import { writeFile } from 'node:fs/promises'
import { join } from 'node:path'
import { z } from 'zod'

// ======== スキーマ ========
const commentSchema = z.object({
  content: z.string().min(1).max(1000),
  author: z.string().min(2).max(100),
})

// ======== タスク詳細ページ ========
export default async function TaskDetailPage({ params }: { params: { id: string } }) {
  const task = await fetch(`https://jsonplaceholder.typicode.com/todos/${params.id}`).then(r => r.json())
  const comments = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}/comments`, {
    next: { tags: [`comments-${params.id}`] }
  }).then(r => r.json())

  return (
    <div style={{ maxWidth: 800, margin: '0 auto', padding: 24 }}>
      <h1>{task.title}</h1>
      <p>状態: {task.completed ? '✅ 完了' : '⏳ 保留中'}</p>

      {/* 状態の迅速な切り替え */}
      <form action={async (formData: FormData) => {
        'use server'
        const id = Number(formData.get('id'))
        const completed = formData.get('completed') === 'true'
        await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`, {
          method: 'PATCH',
          body: JSON.stringify({ completed: !completed })
        })
        revalidateTag(`task-${id}`)
      }}>
        <input type="hidden" name="id" value={params.id} />
        <input type="hidden" name="completed" value={String(task.completed)} />
        <button type="submit">{task.completed ? '保留中にする' : '完了にする'}</button>
      </form>

      {/* コメント追加 */}
      <h2>コメント</h2>
      <form action={async (formData: FormData) => {
        'use server'
        const validated = commentSchema.safeParse({
          content: formData.get('content'),
          author: formData.get('author'),
        })
        if (!validated.success) return { errors: validated.error.flatten().fieldErrors }
        await fetch('https://jsonplaceholder.typicode.com/comments', {
          method: 'POST',
          body: JSON.stringify({
            postId: Number(params.id),
            name: validated.data.author,
            body: validated.data.content,
            email: 'user@example.com',
          })
        })
        revalidateTag(`comments-${params.id}`)
      }}>
        <div><input name="author" required placeholder="お名前" /></div>
        <div><textarea name="content" required placeholder="コメント" /></div>
        <button type="submit">コメントを追加</button>
      </form>

      <ul>{comments.map((c: any) => (
        <li key={c.id}><strong>{c.name}:</strong> {c.body}</li>
      ))}</ul>

      {/* ファイルアップロード */}
      <h2>添付ファイル</h2>
      <form action={async (formData: FormData) => {
        'use server'
        const file = formData.get('file') as File
        if (!file || file.size === 0) return { error: 'ファイルがありません' }
        if (file.size > 5 * 1024 * 1024) return { error: 'ファイルが大きすぎます' }
        const bytes = await file.arrayBuffer()
        await writeFile(join('public/uploads', `${Date.now()}-${file.name}`), Buffer.from(bytes))
        revalidateTag(`attachments-${params.id}`)
      }}>
        <input type="file" name="file" />
        <button type="submit">アップロード</button>
      </form>
    </div>
  )
}