Next.js 05 データ更新(Server Actions・フォーム)

// app/actions.ts(ファイル先頭に 'use server' → 中の関数は全部 Server Action)
'use server'
import { auth } from '@/lib/auth'
import { revalidatePath } from 'next/cache'
import { redirect } from 'next/navigation'
 
export async function createPost(formData: FormData) {
  const session = await auth()
  if (!session?.user) throw new Error('Unauthorized')   // ① 認証
 
  const title = formData.get('title')                    // ② 入力取得
  const content = formData.get('content')
  // ③ バリデーション → ④ DB保存
  revalidatePath('/posts')                               // ⑤ キャッシュ更新
  redirect('/posts')                                     // ⑥ 遷移(これ以降のコードは実行されない)
}

import { createPost } from '@/app/actions'
export function Form() {
  return (
    <form action={createPost}>
      <input name="title" />
      <textarea name="content" />
      <button type="submit">投稿</button>
    </form>
  )
}

'use client'
import { incrementLike } from './actions'
<button onClick={async () => setLikes(await incrementLike())}>Like</button>

'use server'
import { z } from 'zod'
const schema = z.object({
  email: z.string().email('メールアドレスの形式が不正です'),
  title: z.string().min(1, '必須です').max(100),
})
export async function createUser(prevState: unknown, formData: FormData) {
  const parsed = schema.safeParse({
    email: formData.get('email'),
    title: formData.get('title'),
  })
  if (!parsed.success) {
    return { errors: parsed.error.flatten().fieldErrors }   // エラーを「返す」
  }
  // 保存処理
  return { message: '保存しました' }
}

'use client'
import { useActionState } from 'react'
import { createUser } from '@/app/actions'
 
export function SignupForm() {
  const [state, formAction, pending] = useActionState(createUser, { errors: {} })
  return (
    <form action={formAction}>
      <input name="email" required />
      {state?.errors?.email && <p aria-live="polite">{state.errors.email}</p>}
      <button disabled={pending}>{pending ? '送信中...' : '登録'}</button>
    </form>
  )
}