vercelにtypescript(next.js)で作成したwebアプリをデプロイ時、buildエラーが出てデプロイができない。

Question

実現したいこと

• vercelにデプロイできるようにしたい

前提

▼環境(packege.jsonから持ってきてます)

• "@prisma/client": "^4.11.0"
• "@supabase/supabase-js": "^2.12.1"
• "next": "^12.2.5",
• "next-auth": "^4.20.1",
• "react": "17.0.2",
• "react-hook-form": "^7.43.5",
• "prisma": "^4.11.0",
• "typescript": "4.5.5"

フレームワークはnextjs
データベースはsupabase
画像の保存先はsupabase storage
ORMはprisma
フォームはreact hook form
typescriptを使用してます。

npm run devでローカル開発時は問題なく画像の登録、更新、取得できます。
vercelではなく、ローカルでnpm run buildを実行しても、問題なくbuildできますし、
npm run startしても問題なく動作します。

DBに保存する予定のimageのカラムの型はstringです。
next.js側で定義された型ととprismaで保存する時の型が一致しないので、エラーが出ているかと思うのですが、経験が浅く原因の特定・解決が難しくお力をお貸しいただけると嬉しいです。

発生している問題・エラーメッセージ

vercelでbuild時のみに以下のエラーメッセージが出力され、buildできない。

// vercelのログで出力されるエラー
./pages/api/user/index.tsx:19:9
Type error: Type '{ name: any; email: any; password: any; image: any; }' is not assignable to type '(Without<UserCreateInput, UserUncheckedCreateInput> & UserUncheckedCreateInput) | (Without<...> & UserCreateInput)'.
  Object literal may only specify known properties, and 'image' does not exist in type '(Without<UserCreateInput, UserUncheckedCreateInput> & UserUncheckedCreateInput) | (Without<...> & UserCreateInput)'.

該当のソースコード

エラーが出ているapi

• pages/api/user/index.tsx

import prisma from "../../../lib/prisma";
import type { NextApiRequest, NextApiResponse } from "next";
import { hash } from "bcrypt";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method === "POST") {
    const { name, email, password, image } = req.body;
    console.log(req.body);

    const hash_password = await hash(password, 10);
    const data = await prisma.user.create({
      data: {
        name: name,
        email: email,
        password: hash_password,
        image: image,
      },
    });
    return res.status(200).json(data);
  } else if (req.method === "GET") {
    const data = await prisma.user.findMany({});
    return res.status(200).json(data);
  }
}

上記APIを呼ぶcomponent

• pages/user/index.tsx

// pages/user/index.tsx
import { useForm } from "react-hook-form";
import { useRouter } from "next/router";
import Link from "next/link";
import { signIn } from "next-auth/react";
import Image, { StaticImageData } from "next/image";
import { useState, useRef } from "react";
import { supabase } from "../../lib/supabase";
// ユーザのデフォルト画像
const defaultImg = process.env.NEXT_PUBLIC_DEFAULT_IMG;
interface UserInput {
  name: string;
  email: string;
  password: string;
  image?: string | StaticImageData;
}

type uploadImageUrl = string;

export default function UserForm() {
  const [uploadImageUrl, setUploadImageUrl] = useState<uploadImageUrl>();
  const [uploadImageFile, setUploadImageFile] = useState<File>();
  const router = useRouter();
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<UserInput>({
    defaultValues: {
      name: "",
      email: "",
      password: "",
      image: defaultImg,
    },
  });

  // const inputRef = useRef<HTMLInputElement>();
  // 画像が選択されたら、プレビュー
  const onChangeFile = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { files } = e.target;
    setUploadImageUrl(URL.createObjectURL(files[0]));
    setUploadImageFile(files[0]);
  };

  const submitUserRegister = async (input: UserInput) => {
    //supabaseに画像をアップロード
    const { data, error } = await supabase.storage
      .from("photos")
      .upload("user/" + uploadImageFile.name, uploadImageFile);

    //supabaseから画像のURLをDL
    const url = await supabase.storage
      .from("photos")
      .getPublicUrl(JSON.stringify(data));
    const { publicUrl } = url.data;

    // DLしたURLをimageに格納
    const formData = {
      name: input.name,
      email: input.email,
      password: input.password,
      image: publicUrl,
    };

    try {
      const res = await fetch("/api/user", {
        method: "POST",
        body: JSON.stringify(formData),
        headers: {
          "Content-Type": "application/json",
        },
      });
      // json形式で返す
      const data = await res.json();
      const email = data.email;
      //登録済みのデータを使用するとhash化したpasswordを利用してしまうため、formに入力されたpasswordを使用
      const password = formData.password;
      //sign In()でそのままログイン

      await signIn("credentials", {
        email,
        password,
        callbackUrl: "/",
        redirect: true,
      });
    } catch (error) {
      console.error("Error registering user:", error);
    }
  };

  return (
    <div>
      <h3>ユーザー登録</h3>

      <form
        onSubmit={handleSubmit(submitUserRegister)}
        className="w-full max-w-sm"
      >
---
不要部分の為省略
---
        <Image
          src={uploadImageUrl ? uploadImageUrl : defaultImg}
          width={100}
          height={100}
        ></Image>
        <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
          Upload file
        </label>
        <input
          className="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
          id="file_input"
          type="file"
          onChange={onChangeFile}
        />

        <div className="md:flex md:items-center">
          <div className="md:w-2/3">
            <button className="shadow bg-blue-500 hover:bg-blue-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded">
              <Link href={`/`}>Home</Link>
            </button>
          </div>
          <div className="md:w-2/3">
            <button
              className="shadow bg-blue-500 hover:bg-blue-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded"
              type="submit"
            >
              Sign Up
            </button>
          </div>
        </div>
      </form>
    </div>
  );
}

schema.prisma

model User {
  id            String       @default(cuid()) @id
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  password      String
  createdAt     DateTime  @default(now()) @map(name: "created_at")
  updatedAt     DateTime  @updatedAt @map(name: "updated_at")
  posts         Post[]
  @@map(name: "users")
}

他に必要な情報等があればその旨仰っていただけると幸いです。
よろしくお願いいたします。

Answer 1

Deploy to Vercel に以下のようにあります。

Vercel will now deploy your application. The package.json file in the root directory of the example project uses a vercel-build script to run prisma generate && prisma migrate deploy && next build. This generates Prisma Client, applies the migrations, and then builds the Next.js project. This ensures that the generated Prisma Client in node_modules/@prisma/client is available to the Next.js serverless functions.

prisma generateを先に実行する必要があるかもしれません。

https://github.com/prisma/prisma/issues/5175#issuecomment-763713202 にあるように、postinstallにこのコマンドを追加するのも一つの手かと思います。