트러블슈팅) Next.js15.1 버전 업데이트 이후 params의 타입이 Promise로 변경되면서 빌드 시 타입 오류가 발생

Next.js 15 App Router에서 page.tsx의 타입을 자동 추론하는 과정에서 Promise<any>와 충돌하는 타입 오류

 

src>app>items>[id]>page.tsx

[수정전]

import { cartItemList } from "@/components/cart/data/cartItemList";
import ItemDetail from "@/components/items/ItemDetail";

export function generateStaticParams() {
  return cartItemList.map((item) => ({
    id: item.id,
  }));
}

// ✅ 타입을 인라인으로 선언 (interface 쓰지 마세요)
export default function Page({ params }: { params: { id: string } }) {
  return <ItemDetail productId={params.id} />;
}

 

원인

Next.js의 15.1 버전 업데이트에 의해 발생하며, params 및 searchParams가 비동기식으로 처리되는 방식으로 전환된 것이 원인.

빌드시 발생한 타입 오류는 params의 기대 타입과 실제 타입의 불일치로 인한 것임.

 

변경

params의 타입을 Promise로 감싸 비동기 처리로 변경

 

[수정후]

import { cartItemList } from "@/components/cart/data/cartItemList";
import ItemDetail from "@/components/items/ItemDetail";

// ✅ 정적 경로 생성을 위한 함수
export function generateStaticParams(): { id: string }[] {
  return cartItemList.map((item) => ({
    id: item.id,
  }));
}

// ✅ Next.js 15 기준 - params는 Promise 형태로 받아서 await 처리
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  return <ItemDetail productId={id} />;
}

 

 

 

 

 

 

참고

인프런 질의응답

https://www.inflearn.com/community/questions/1474409/type-error-type-x27-params-id-string-string-x27-does-not-sa?srsltid=AfmBOopi2XnkUbaYlJBoIjV4eVCdZYMrs2rWPeJ489ubBQ6T4NO3-Oee