meta 데이터 타입 에러

문제점

• 동적 meta 데이터 구현 시 빌드 과정에서 타입 에러 발생
• 오류 메세지

src/app/(after-login)/dashboard/[id]/page.tsx
Type error: Type '{ params: { id: string; }; }' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ id: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

원인

• Next.js App Router에서는 동적 라우트 파라미터 params를 내부적으로 Promise 형태로 전달
• 기존 코드에서는 params를 단순 객체({ id: string })로 처리하거나 union 타입({ id: string } | Promise<{ id: string }> 등)으로 처리하여 타입 불일치가 발생

해결 방법

export async function generateMetadata({ params }: { params: { id: string } }): Promise<Metadata> {
  const id = params.id;// 이 부분에서 단순 객체로 처리하여 타입 불일치 발생

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
  const { id } = await params;// 수정

• page.tsx
  • params의 타입을 Promise<{ id: string }>로 명시하고, 내부에서 await params로 resolved 객체를 사용
• edit/layout.tsx
  • params의 타입을 Promise<{ id: string }>로 명시하고, 메타 데이터 생성 시 await params로 사용
  • 실제 렌더링 컴포넌트에서는 params를 사용하지 않으므로, void params;로 처리
• 뭔가 해결을 했지만 하다 보니까 같은 방법 다른 느낌으로 두 파일을 처리해버렸어요… 일부로 이렇게 하기도 힘들듯
• resolved 객체여기서 params는 Promise<{ id: string }> 타입이라면, await params는 Promise가 이행되어 반환하는 { id: string } 객체가 됩니다. 이 { id: string } 객체를 "resolved 객체"라고 부릅니다.
• 즉, Promise가 완료된 후 실제로 사용할 수 있는 값(객체)을 의미합니다.
• resolved 객체"란 Promise를 await를 사용하여 처리한 후, Promise가 이행(fulfilled)되어 반환한 실제 값

resolved 객체란 Promise를 await를 사용하여 처리한 후, Promise가 이행(fulfilled)되어 반환한 실제 값

여기서 params는 Promise<{ id: string }> 타입이라면, await params는 Promise가 이행되어 반환하는 { id: string } 객체가 됩니다. 이 { id: string } 객체를 "resolved 객체"라고 부릅니다.

즉, Promise가 완료된 후 실제로 사용할 수 있는 값(객체)을 의미합니다.