[Next.js 15] 타입 에러 해결하기: Type error: Type '{ params: { id: string; }; }' does not satisfy the constraint 'PageProps'.

Vecel에 배포하는 과정에서

Type error: Type '{ params: { id: string; }; }' does not satisfy the constraint 'PageProps'.

위와 같은 타입 에러를 만났다.

문제 상황

문제가 난 코드는 아래와 같다. 코드상 오류는 없었는데 배포하니 타입에러가 났다.

export default async function StudyDetailPage({
  params,
}: {
  params: { id: string };
}) {
  const { id } = params;
  // ...
}

구글링으로 답변을 찾아보니 Next.js 15부터는 params와 searchParams가 비동기(Promise) 로 변경되었기 때문에 위 코드는 타입 에러를 발생시킨다.

---

해결 방법

params를 Promise로 타입 지정하고 await를 통해 값을 받아야 한다.

type StudyDetailPageProps = {
  params: Promise<{ id: string }>;
};

export default async function StudyDetailPage({
  params,
}: StudyDetailPageProps) {
  const { id } = await params;
  // ...
}

---

왜 바뀌었을까? (Next.js 15 기준)

1. 성능 최적화
   → 라우트 파라미터를 필요할 때만 불러오도록 지연 로딩 가능
2. 스트리밍 지원
   → Partial Prerendering(PPR)이나 스트리밍 렌더링과 더 잘 통합됨
3. 서버 컴포넌트와의 일관성
   → 서버 컴포넌트가 기본적으로 async 함수이므로, params도 일관되게 비동기로 일치

---

참고한 답변

같은 에러를 겪는 다른 사람의 질문이 스택오버플로우에 있었다!
▶ Stackoverflow 링크

---

마무리

이렇게 수정하니 해당 에러는 해결됐고... 물론 다른 에러가 나긴 했지만 ㅜ
어쨌든 중요한 건!
👉 Next.js 15에서는 params도 Promise로 받자!