【Next.js】Prisma ClientはClient Componentではつかえない??

Next.js(App Router)で Prisma Client を使用したところ、エラーに遭遇しました。

Component が原因で起こったエラーっぽいですが、よくわからなかったのでまとめました！

バージョン

	バージョン
Prisma	5.2.0
Prisma Client	5.2.0
Prisma Studio	0.494.0
Node.js	18.17.0
Next.js	13.4.19

Next.js は、App Router を使用しています

エラー内容

Unhandled Runtime Error
Error: PrismaClient is unable to run in this browser environment, or has been bundled for the browser (running in `unknown`).
If this is unexpected, please open an issue: https://github.com/prisma/prisma/issues

エラー文を DeepL にかけると、

未処理のランタイム・エラー
エラー エラー: PrismaClientはこのブラウザ環境では実行できません。
予期しないエラーが発生した場合は、https://github.com/prisma/prisma/issues。

原因を考える

エラー文をそのままググってもいいサイトが見つからなかったので、エラー文の意味を考えます。

「PrismaClient はこのブラウザ環境では実行できません。」

つまり、ブラウザ側（クライアント側）では Prisma Client が使えないってこと？？

エラーが出ているコンポーネントを確認してみると、 確かにClient Component になってるな...

"use client";

import prisma from "@/lib/prisma";

export default function AddUser() {
  ...

  const fetchAsyncAddUser = async () => {
    ...

    await prisma.user.create({
      data: {
        name: name,
        email: email,
        posts: {
          create: { title: postTitle },
        },
        profile: {
          create: { bio: profile },
        },
      },
    });
  };

  ...

}

Prisma の HPを確認してみると、SSR や SSG、API Routes で使えるとのこと。

⇒CSR では使えそうにないので、Client Component でも使えなさそうです。

対応方針

• Sever Actionsを使う
• もしくはRoute Handlersを Client Component からたたくようにする

やってみる

Route Handlersを Client Component からたたくようにする

今回はこちらの方法でやってみます

修正前

・Client Component

"use client";

import prisma from "@/lib/prisma";

export default function AddUser() {
  ...

  const fetchAsyncAddUser = async () => {
    ...

    // ここからの処理をAPIへ
    await prisma.user.create({
      data: {
        name: name,
        email: email,
        posts: {
          create: { title: postTitle },
        },
        profile: {
          create: { bio: profile },
        },
      },
    });
    // ここまで

    ...

  };

  ...

}

修正後

・Clinet Component

"use client";

import prisma from "@/lib/prisma";

export default function AddUser() {
  ...

  const fetchAsyncAddUser = async () => {
    ...

    // APIのURL
    const url = "http://localhost:3000/api/user";
    // リクエストパラメータ
    const params = {
      method: "POST",
      // JSON形式のデータのヘッダー
      headers: {
        "Content-Type": "application/json",
      },
      // リクエストボディ
      body: JSON.stringify({
        name: name,
        email: email,
        postTitle: postTitle,
        profile: profile,
      }),
    };

    // APIへのリクエスト
    await fetch(url, params);

    ...

  };

  ...

}

・Route Handler
⇒ ./src/app/api/user/route.ts に作成（URL：http://localhost:3000/api/user）

import { NextRequest, NextResponse } from "next/server";

import prisma from "@/lib/prisma";

export async function POST(req: NextRequest) {
  // リクエストボディを展開
  const { name, email, postTitle, profile } = await req.json();

  const res = await prisma.user.create({
    data: {
      name: name,
      email: email,
      // ネストすることで参照先のテーブルに書き込める
      // Postテーブルに書き込む
      posts: {
        create: { title: postTitle },
      },
      // Profileテーブルに書き込む
      profile: {
        create: { bio: profile },
      },
    },
  });

  return NextResponse.json(res);
}

こんな感じで Route Handler を作成してそれをたたくようにしたらうまくいきましたーーー！！！

そもそもデータ更新（追加含め）をClient Componentでやっている時点でおかしかったです。。
ドキュメントを読んで出直してきます

参考文献

https://www.prisma.io/nextjs

https://nextjs.org/docs/app/building-your-application/routing/route-handlers