문제점

• 동적 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 객체