Next.js 15.1.0 버전을 기준으로 작성되었습니다.
해결 방법 바로 궁금하신 분들은 여기를 클릭해주세요.
들어가며
운영중인 정적 블로그는 커스터 마이징에 제약이 있어 블로그를 새로 만들기로 하였다.
요즘 공부하고 있는 Next.js 프레임워크를 활용하여 개발을 시작하였는데 빌드 시에
기존 코드의 매개변수 문법에서 오류가 발생하여 해결 방법을 공유하고자 한다.
에러 메시지
type Props = {
params: {
category: string;
slug: string;
};
};
const PostDetail = async ({ params }: Props) => {
const param = await params;
const category = param.category;
const slug = param.slug;
...src/app/blog/[category]/[slug]/page.tsx
Type error: Type 'Props' does not satisfy the constraint 'PageProps'.
Types of property 'params' are incompatible.
Type '{ category: string; slug: string; }' is missing the following properties from
type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]오류 메시지를 통해 에러가 발생한 부분을 보아도 이상한 점을 찾지 못했다.
해결방법
PageProps Type Errors in Next.js #142577
공식 래퍼런스가 궁금하신 분들은 여기를 클릭해주세요.
Next.js 15 업데이트에서 Promise 매개변수를 사용하는 방법이 달라진 것이 문제였다.
- Next.js 버전 다운 그레이드
- 아래와 같은 방법으로 수정하기
// type Props = {
// params: {
// category: string;
// slug: string;
// };
// };
type Props = Promise<{
category: string;
slug: string;
}>;
const PostDetail = async ({ params }: { params: Props }) => {
const category = (await params).category;
const slug = (await params).slug;
...다음과 같이 수정하면 정상적으로 빌드가 가능하다