データ取得とアクションの型付け

はじめに

型付き fetch ヘルパー

// app/lib/http.ts
export async function json<T>(res: Response): Promise<T> {
  if (!res.ok) throw new Error(`HTTP ${res.status}`)
  return (await res.json()) as T
}

// app/page.tsx (server)
export type Post = { id: number; title: string }

export default async function Page() {
  const res = await fetch("https://example.com/api/posts", { next: { revalidate: 60 } })
  const posts = await json<Post[]>(res)
  return (
    <main style={{ display: "grid", gap: 8 }}>
      <h1>Posts</h1>
      <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
    </main>
  )
}

キャッシュ制御

// app/page.tsx (server)
export default async function Page() {
  const res = await fetch("https://example.com/api/now", { cache: "no-store" })
  const data = await res.json() as { now: string }
  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

// Alternative: revalidate per request
// fetch(url, { next: { revalidate: 5 } })

Server Action モジュール

// app/actions.ts
"use server"
import { revalidatePath } from "next/cache"

export async function createPost(form: FormData): Promise<{ id: string }> {
  const title = String(form.get("title") || "")
  if (!title) throw new Error("title required")
  // pretend DB insert
  const id = Math.random().toString(36).slice(2)
  revalidatePath("/")
  return { id }
}

action を使うクライアントフォーム

"use client"
import { useTransition } from "react"
import { createPost } from "../actions"

export default function NewPost() {
  const [pending, start] = useTransition()

  const onSubmit = async (formData: FormData) => {
    await createPost(formData)
  }

  return (
    <form action={(fd) => start(() => onSubmit(fd))} style={{ display: "grid", gap: 8 }}>
      <input name="title" placeholder="Title" />
      <button disabled={pending}>{pending ? "Creating…" : "Create"}</button>
    </form>
  )
}

ヒントと安全対策

Server Action の型付け確認

まとめ