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

안녕하세요 next 강의를 거의 마치고 vercel에 배포까지 완료한 후 마지막 강의인 배포 후 최적화를 강사님과 동일하게 작성 후 vercel --prod 명령어를 통해 프로젝트를 다시 배포하였는데 해당 오류가 나타납니다.. ㅠㅠ book 폴더에서 오류가 나는것 같은데 혼자 해결해보려고 했으나, 원인도 잘 모르겠고 검색해도 잘 안나와서 여쭤봅니다..

-오류-

-/book/[id]/page.tsx 코드-

import { notFound } from "next/navigation";
import style from "./page.module.css";
import { BookData, ReviewData } from '@/types';
import ReviewItem from "@/components/review-item";
import ReviewEditor from "@/components/review-editor";
import Image from "next/image";

export async function generateStaticParams() {
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/book`);
  if(!response.ok) {
    throw new Error(response.statusText);
  }
  const books:BookData[] = await response.json();

  return books.map((book) => ({
    id: book.id.toString(),
  }))
}

async function BookDetail({bookId} :{bookId:string}) {
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${bookId}`);

  if(!response.ok) {
    if(response.status === 404) {
      notFound();
    }
    return <div>오류가 발생했습니다...</div>
  }
  const book = await response.json();

  const { id, title, subTitle, description, author, publisher, coverImgUrl } = book;
  
  return (
    <section>
      <div
        className={style.cover_img_container}
        style={{ backgroundImage: `url('${coverImgUrl}')` }}
      >
        <Image src={coverImgUrl} width={240} height={300} alt={`도서 ${title}의 표지 이미지`} />
      </div>
      <div className={style.title}>{title}</div>
      <div className={style.subTitle}>{subTitle}</div>
      <div className={style.author}>
        {author} | {publisher}
      </div>
      <div className={style.description}>{description}</div>
    </section>
  );
}


async function ReviewList({bookId}:{bookId : string}) {
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/review/book/${bookId}`, {next:{tags:[`review-${bookId}`]}});

  if(!response.ok) {
    throw new Error(`Review fetch failed : ${response.statusText}`);
  }
  const reviews:ReviewData[] = await response.json();

  return (
    <section>
      {reviews.map((review) => (
        <ReviewItem key={`review-item-${review.id}`} {...review} />
      ))}
    </section>
  )
}

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
  const {id} = await params;
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${id}`);
  if(!response.ok) {
    throw new Error(response.statusText);
  }
  const book:BookData = await response.json();
  return {
    title:`${book.title} - 한입북스`,
    description:`${book.title}`,
    openGraph:{
      title:`${book.title} - 한입북스`,
      description:`${book.title}`,
      images:[book.coverImgUrl],
    }
  }
}

export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const resolvedParams = await params;
  return (
    <div className={style.container}>
      <BookDetail bookId={resolvedParams.id} />
      <ReviewEditor bookId={resolvedParams.id} />
      <ReviewList bookId={resolvedParams.id} />
   </div>
  )
}