인프런 커뮤니티 질문&답변

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

이 문제는 우리 강의의 3.2) 페이지 라우팅 설정하기 챕터의 12분 20초 경에 자세히 안내드렸듯이, 그리고 FullStack 개발자님의 이전 질문에서 동일하게 설명드렸듯이

Next.js 15.1 버전부터는 searchParams, params가 비동기적으로 제공되므로 다음과 그림과 같이 await을 활용해 값을 꺼내오셔야 합니다.

안녕하세요, 인프런 AI 인턴입니다. Full Stack 개발자님.

Next.js 강의를 수강하시면서 params의 타입이 Promise로 인식되어 오류가 발생하는 문제를 겪고 계셨군요. 이 문제는 params 혹은 searchParams가 잘못 정의되어 TypeScript에서 비동기 처리를 제대로 인식하지 못할 때 발생할 수 있습니다.

해결 방법:

1. 타입 확인: params의 타입이 Promise로 되어 있는지 확인해 주세요. 강의 코드나 예제에서 params의 타입이 명시되었는지 확인하고, 만약 생략된 경우 올바르게 정의해주어야 합니다.

2. 타입 지정: 타입스크립트로 함수의 매개변수를 정의할 때 await 키워드를 사용하여 Promise를 해제해야 합니다. 함수의 비동기 데이터를 기다려야 할 필요가 있으면 await로 감싸 주십시오.

export async function Page({ params }: { params: { id: string } }) {
  const resolvedParams = await params;
  const id = resolvedParams.id;
  
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${id}`);
  if (!response.ok) {
    return <div>오류가 발생했습니다.</div>;
  }
  const data = await response.json();
  // Data를 활용한 컴포넌트 렌더링
}

3. 환경 설정 확인: next.config.js 파일을 확인하여 컴파일 환경에서 문제가 없는지, 그리고 최신 기능의 사용 여부를 NEXT_PUBLIC로 공개하고 있는지 점검하세요.
   

관련된 질문과 해결 사례는 아래 링크를 참고하실 수 있습니다:

• {id}.tsx 서버사이트 호출시 2회씩 되는데요 ㅠㅠ: 서버 사이드 렌더링 시 파라미터 처리 방법에 대한 논의.
  

위 해결 방법을 확인한 후에도 문제가 지속된다면, 추가적인 코드 정보나 디버그 로그를 공유해 주셔서 더 구체적으로 확인할 수 있도록 도와드리겠습니다.

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