Failed Deployment to Vercel

[emperial]

Hello Team

I’m trying to deploy my NextJS project on Vercel however it gets failed due to below error:

My code in page.tsx in relation to error is as below:

"use client";
import { BookStatusBadge } from "@/app/components";
import { Status, Book } from "@prisma/client";
import {
  Link,
  Table,
  TextFieldInput,
  TextFieldRoot,
  TextFieldSlot,
} from "@radix-ui/themes";
import BooksActions from "./BooksActions";
import FilterMixed from "./_components/Filters/FilterMixed";
import { useEffect, useState, useCallback, FormEvent, useRef } from "react";
import { MagnifyingGlassIcon } from "@radix-ui/react-icons";

interface Props {
  searchParams: { status: Status; category?: string; author?: string };
  onSearch: (query?: string) => void;
}

const BooksPage = ({ searchParams, onSearch = () => {} }: Props) => {
  const [books, setBooks] = useState<Book[]>([]);
  const [categories, setCategories] = useState<string[]>([]);
  const [authors, setAuthors] = useState<string[]>([]);
  const [query, setQuery] = useState("");

  const ref = useRef<HTMLInputElement>(null);

  const handleSubmit = (event: FormEvent) => {
    event.preventDefault();
    if (ref.current) {
      const newQuery = ref.current.value;
      setQuery(newQuery); // Update the query state
      onSearch(newQuery); // Call the onSearch callback
      ref.current.value = ""; // Clear the input after search
    }
  };

  const fetchBooks = useCallback(async () => {
    try {
      const url = `/api/filter/books?status=${encodeURIComponent(
        searchParams.status
      )}&category=${encodeURIComponent(
        searchParams.category || ""
      )}&author=${encodeURIComponent(searchParams.author || "")}`;
      const response = await fetch(url);
      const fetchedBooks = await response.json();
      const booksWithParsedDates = fetchedBooks.map((book: Book) => ({
        ...book,
        updatedAt: new Date(book.updatedAt),
      }));
      setBooks(booksWithParsedDates);
    } catch (error) {
      console.error("Failed to fetch books:", error);
    }
  }, [searchParams]);

  const searchBooks = useCallback(async () => {
    try {
      const url = `/api/filter/books/search?query=${encodeURIComponent(query)}`;
      const response = await fetch(url);
      const fetchedBooks = await response.json();
      const booksWithParsedDates = fetchedBooks.map((book: Book) => ({
        ...book,
        updatedAt: new Date(book.updatedAt),
      }));
      setBooks(booksWithParsedDates);
    } catch (error) {
      console.error("Failed to fetch books:", error);
    }
  }, [query]);

  const fetchCategories = useCallback(async () => {
    try {
      const response = await fetch("/api/filter/categories");
      const fetchedCategories = await response.json();
      setCategories(
        fetchedCategories.map(
          (category: { category_name: string }) => category.category_name
        )
      );
    } catch (error) {
      console.error("Failed to fetch categories:", error);
    }
  }, []);

  const fetchAuthors = useCallback(async () => {
    try {
      const response = await fetch("/api/filter/authors");
      const fetchedAuthors = await response.json();
      setAuthors(
        fetchedAuthors.map(
          (author: { author_name: string }) => author.author_name
        )
      );
    } catch (error) {
      console.error("Failed to fetch authors:", error);
    }
  }, []);

  useEffect(() => {
    if (query === "") {
      fetchBooks();
    } else {
      searchBooks();
    }
    fetchCategories();
    fetchAuthors();
  }, [
    searchParams,
    query,
    fetchBooks,
    searchBooks,
    fetchCategories,
    fetchAuthors,
  ]);

  return (
    <div>
      <BooksActions />
      <form onSubmit={handleSubmit}>
        <TextFieldRoot>
          <TextFieldSlot>
            <MagnifyingGlassIcon height="16" width="16" />
          </TextFieldSlot>
          <TextFieldInput ref={ref} placeholder="Search Books..." />
        </TextFieldRoot>
      </form>
      <FilterMixed categories={categories} authors={authors} />
      <Table.Root variant="surface">
        <Table.Header>
          <Table.Row>
            <Table.ColumnHeaderCell className="hidden md:table-cell">
              Cover
            </Table.ColumnHeaderCell>
            <Table.ColumnHeaderCell>ISBN</Table.ColumnHeaderCell>
            <Table.ColumnHeaderCell>Title</Table.ColumnHeaderCell>
            <Table.ColumnHeaderCell>Status</Table.ColumnHeaderCell>
            <Table.ColumnHeaderCell className="hidden md:table-cell">
              Last Update
            </Table.ColumnHeaderCell>
          </Table.Row>
        </Table.Header>

        <Table.Body>
          {books.map((book) => (
            <Table.Row key={book.id} align="center">
              <Table.RowHeaderCell className="hidden md:table-cell">
                <Link href={`/books/${book.id}`}>
                  <picture>
                    <img
                      height="100"
                      width="70"
                      src={book.image || ""}
                      alt=""
                    />
                  </picture>
                </Link>
              </Table.RowHeaderCell>
              <Table.Cell>{book.isbn}</Table.Cell>
              <Table.Cell>
                <Link href={`/books/${book.id}`}>{book.title}</Link>
              </Table.Cell>
              <Table.Cell>
                <BookStatusBadge status={book.status} />
              </Table.Cell>
              <Table.Cell className="hidden md:table-cell">
                {book.updatedAt.toDateString()}
              </Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table.Root>
    </div>
  );
};

export const dynamic = "force-dynamic";

export default BooksPage;

Could someone help me on that?