Next.js × Prisma 本番実装ガイド：App Router・Server Components・Server Actions・Zod境界・接続管理を型安全に固める

// src/lib/db.ts
import "server-only"; // クライアントから import されたらビルドエラーにする
import { PrismaPg } from "@prisma/adapter-pg";
import { PrismaClient } from "../generated/prisma/client";

const createClient = () =>
  new PrismaClient({
    adapter: new PrismaPg({ connectionString: process.env.DATABASE_URL }),
  });

// 開発のホットリロードで接続が増殖しないよう globalThis に保持
const globalForPrisma = globalThis as unknown as { prisma?: ReturnType<typeof createClient> };

export const prisma = globalForPrisma.prisma ?? createClient();

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

// src/app/posts/page.tsx （Server Component：デフォルト）
import { prisma } from "@/lib/db";

export default async function PostsPage() {
  // include で著者も1〜2クエリでまとめて取得（N+1なし）
  const posts = await prisma.post.findMany({
    where: { published: true },
    select: {
      id: true,
      title: true,
      author: { select: { name: true } }, // 必要な列だけ（取りすぎ防止）
    },
    orderBy: { createdAt: "desc" },
    take: 20,
  });

  return (
    <ul className="space-y-2">
      {posts.map((post) => (
        <li key={post.id}>
          <a href={`/posts/${post.id}`} className="underline-offset-4 hover:underline">
            {post.title}
          </a>
          <span className="ml-2 text-sm text-muted-foreground">by {post.author.name}</span>
        </li>
      ))}
    </ul>
  );
}

// src/app/posts/actions.ts
"use server";

import { z } from "zod";
import { revalidatePath } from "next/cache";
import { Prisma } from "@/generated/prisma/client";
import { prisma } from "@/lib/db";

// 入力スキーマ（型・検証・エラー文言の単一真実源）
const CreatePostSchema = z.object({
  title: z.string().min(1, "タイトルは必須です").max(200),
  body: z.string().min(1, "本文は必須です"),
  authorId: z.coerce.number().int().positive(),
});

export type CreatePostState = {
  ok: boolean;
  errors?: Record<string, string[]>;
  message?: string;
};

export async function createPost(
  _prev: CreatePostState,
  formData: FormData,
): Promise<CreatePostState> {
  // 1) 境界で検証：不正な形はここで弾く
  const parsed = CreatePostSchema.safeParse(Object.fromEntries(formData));
  if (!parsed.success) {
    return { ok: false, errors: z.flattenError(parsed.error).fieldErrors };
  }

  // 2) 検証済みデータだけをDBへ
  try {
    await prisma.post.create({ data: parsed.data });
  } catch (e) {
    if (e instanceof Prisma.PrismaClientKnownRequestError && e.code === "P2002") {
      return { ok: false, message: "同じタイトルの記事が既に存在します" };
    }
    throw e; // 想定外は握りつぶさない（可観測性）
  }

  // 3) 成功したらキャッシュを無効化して一覧を最新に
  revalidatePath("/posts");
  return { ok: true };
}

// src/app/posts/new/post-form.tsx
"use client";

import { useActionState } from "react";
import { createPost, type CreatePostState } from "../actions";

const initialState: CreatePostState = { ok: false };

export function PostForm() {
  const [state, formAction, pending] = useActionState(createPost, initialState);

  return (
    <form action={formAction} className="space-y-3">
      <div>
        <label htmlFor="title" className="block text-sm font-medium">タイトル</label>
        <input id="title" name="title" required aria-describedby="title-error"
               className="w-full rounded-md border px-3 py-2" />
        {state.errors?.title && (
          <p id="title-error" role="alert" className="text-sm text-destructive">
            {state.errors.title[0]}
          </p>
        )}
      </div>
      <input type="hidden" name="authorId" value={1} />
      <button type="submit" disabled={pending}
              className="rounded-md bg-primary px-4 py-2 text-primary-foreground disabled:opacity-50">
        {pending ? "送信中…" : "投稿する"}
      </button>
      {state.message && <p role="alert" className="text-sm text-destructive">{state.message}</p>}
    </form>
  );
}

// 取得側：タグを付けてキャッシュ
import { unstable_cache } from "next/cache";

export const getPosts = unstable_cache(
  async () => prisma.post.findMany({ where: { published: true } }),
  ["posts"],
  { tags: ["posts"] },
);

// 変更側：該当タグを無効化
import { revalidateTag } from "next/cache";

export async function publishPost(id: number) {
  "use server";
  await prisma.post.update({ where: { id }, data: { published: true } });
  revalidateTag("posts"); // posts タグの全キャッシュを破棄
}

// 必要な場合のみ：ルート単位でランタイムを宣言
export const runtime = "nodejs"; // 既定。Edgeにする明確な理由がなければこれ

// 検証ロジックはDB非依存なので高速にテストできる
import { describe, it, expect } from "vitest";
import { CreatePostSchema } from "./schema";

describe("CreatePostSchema", () => {
  it("空タイトルを拒否する", () => {
    const r = CreatePostSchema.safeParse({ title: "", body: "x", authorId: "1" });
    expect(r.success).toBe(false);
  });
});