Vercel에 배포하는 과정에서 generateMetaData가 문제를 일으킵니다.

안녕하세요! 언제나 멋진 강의 감사드립니다.

다름이 아니라, 프로젝트를 Vercel에 배포하는 과정에서 아래와 같은 컴파일 실패 에러가 빌드 로그에서 검출되어서 이에 대해 여쭤보고 싶습니다.

화면 상에서는
src/app/(with-searchbar)/search/page.tsx
에 선언한 generateMetaData 함수가 Next.js 페이지의 요구조건을 충족시키지 못한다라는 내용으로 보여지는데요, 이런 경우에는 해당 요소에서 어떤 부분을 확인해볼 수 있을까요?

해당 페이지에 대한 코드도 함께 첨부해 드리겠습니다.

• \app\(with-searchbar)\search\page.tsx

import BookItem from "@/components/book-item";
import BookListSkeleton from "@/components/skeleton/book-list-skeleton";
import { BookData } from "@/types";
import { delay } from "@/util/delay";
import { Metadata } from "next";
import { Suspense } from "react";

//index 페이지와 다르게 search 페이지는 QueryString과 같은 동적인 값에 의존하고 있기 때문에 static 페이지로는 설정할 수 없지만, 데이터 캐시를 최대한 이용하는 것으로 최적화
async function SearchResult({q}:{q:string}) {

  await delay(2000);
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/search?q=${q}`,
    {cache: "force-cache"}
  );

  if(!response.ok){
    return <div>오류가 발생했습니다 ...</div>
  }

  const books: BookData[] = await response.json();

  return (
    <div>
      {books.map((book) => (
        <BookItem key={book.id} {...book} />
      ))}
    </div>
  );
}

//현재 페이지의 메타데이터를 동적으로 생성하는 함수
export async function generateMetaData({
  searchParams,
}: {
  searchParams: Promise<{q?: string}>;
}): Promise<Metadata> {
  const {q} = await searchParams;

  return {
    title: `${q} : 검색 결과`,
    description : `검색어 ${q}의 검색 결과입니다`,
    openGraph: {
      title: `${q} : 검색 결과`,
      description : `검색어 ${q}의 검색 결과입니다`,
      images: ["/thumbnail.png"],
    }
  }
}

export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{ q: string }>;
}) {

  const {q} = await searchParams;

  return (
    <Suspense key={q || ""} fallback={<BookListSkeleton count={3} />}>
      <SearchResult q={q ||""} />
    </Suspense>);
}