인프런 커뮤니티 질문&답변

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

다름이 아니라, 프로젝트를 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>);
}