작성한 질문수 64

2

안녕하세요, 인프런 AI 인턴입니다. Next님.

Next.js의 최신 버전에서는 params의 타입이 Promise로 변경되면서 빌드 시 타입 오류가 발생할 수 있습니다. 이 문제는 Next.js의 15.1 버전 업데이트에 의해 발생하며, params 및 searchParams가 비동기식으로 처리되는 방식으로 전환된 것이 원인입니다.

문제 요약

빌드시 발생한 타입 오류는 params의 기대 타입과 실제 타입의 불일치로 인해 나타났습니다. Next.js의 최근 변경 사항으로 인해 params를 다루는 방식이 바뀌었습니다.

해결 방법

params의 타입을 Promise로 감싸 비동기 처리로 변경해야 합니다. 아래와 같은 방식으로 코드를 수정하면 됩니다:

import ClientComponent from "@/app/components/ClientComponent";

// 변환된 타입 정의
type PageParams = Promise<{ id: string }>;

const Page = async ({ params }: { params: PageParams }) => {
  const { id } = await params; // 비동기로 변환

  return (
    <div>
      Page {id}
      <ClientComponent>
        <></>
      </ClientComponent>
    </div>
  );
};

export default Page;

이 방법은 Next.js 15.1 이후 업데이트로 변경된 params의 비동기 처리 규칙에 따라 타입 오류를 해결합니다.

참고 자료와 추가 링크

• 이러한 변경 사항에 대한 공지 항목이나 추가 문서가 필요할 경우에는 Next.js 공식 문서의 업데이트 가이드를 참조하시기 바랍니다.
  
• 또 다른 유사한 경우로, 다른 개발자들과의 문제 해결 경험을 확인할 수 있는 이 질문을 참고할 수 있습니다.
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

0

안녕하세요 이정환입니다.

본 내용은 우리 강의의 3.2) 페이지 라우팅 설정하기 챕터에 잘 설명되어 있으니 참고하시면 좋겠습니다.

감사합니다.