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

import style from "./page.module.css";
// 변경 후:
import Image from 'next/image';
import { notFound } from "next/navigation"; 
import { BookData } from "@/types";


export const dynamicParams = true;
export async function generateStaticParams() {
  return [{id: "1"}, {id: "2"}, {id: "3"}];
}


async function BookDetail({bookId}:{bookId:string}){
  // params가 Promise이므로 먼저 await로 해결(resolve)해야 합니다
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${bookId}`)  ;
  
  if (!response.ok){
    if (response.status === 404) {
      notFound();
    }
    return <section>Failed to fetch books</section>;
  }
  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}')` }}
      >
        <img src={coverImgUrl} 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>
  );
}

function ReviewEditForm() {
  async function createReviewAction(formData: FormData) {
    "use server";
    //console.log("server action called");
    const content = formData.get("content")?.toString();
    const author = formData.get("author")?.toString();
    console.log("server action called", { content, author });
  }
  return (
    <section >
        <h2>리뷰 작성</h2>
        <form action={createReviewAction}>
        <textarea 
          name="content"  
          placeholder="리뷰를 작성해주세요"
          
        ></textarea>
        <input  
          name="author" 
          placeholder="작성자"
        />
        <button type="submit">리뷰 작성</button>
      </form>
    </section>
  );
}


export default  function Page({ params }: { params: { id: string } }) {
 // const bookId = params.id; // 미리 params 처리

  return (
    <div className={style.container}>
      <BookDetail bookId={params.id}/>
      <ReviewEditForm/>
    </div>
  )
}

에서 Error: Route "/book/[id]" used `params.id`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at Page (src\app\book\[id]\page.tsx:79:33)
  77 |   return (
  78 |     <div className={style.container}>
> 79 |       <BookDetail bookId={params.id}/>
     |                                 ^
  80 |       <ReviewEditForm/>
  81 |     </div>
  82 |   )

이에러가 계속 나는데 chatgpt랑 계속 풀어 보려고 해도 쉽지 않네요 params 쓰는 시점 문제인거 같은데 강의 내용을 봐서는 잘모르겠네요

export default  function Page({ params }: { params: { id: string } }) {
 // const bookId = params.id; // 미리 params 처리

  return (
    <div className={style.container}>
      <BookDetail bookId={params.id}/>
      <ReviewEditForm/>
    </div>
  )
}

bookId 이 부분이 계속 async 어쩌구 하는데