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

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

앗! .. 이 문제는 답글에 작성해주신대로 searchParams 혹은 params를 비동기로 가져오지 않기 때문에 발생하는 문제로 보입니다.

Next.js 15.1 버전부터는 우리 강의의 "3.2) 페이지 라우팅 설정하기" 챕터에 설명드린대로 searchParams와 params를 모두 Promise 형태로 가져와야 하고 이후의 챕터에서도 이 내용은 동일하게 적용됩니다.

따라서 귀찮으시겠지만 ㅠㅠ 페이지 컴포넌트에 async를 다시 붙여주신 다음에 await를 활용하여 serachParams를 불러오는 방식으로 코드를 수정해주셔야 할 것 같습니다. 이렇게 하셔도 스트리밍은 정상적으로 강의와 동일하게 작동합니다. Suspense 컴포넌트를 통해 이루어지기 때문입니다!

PS. 수업 자료 업데이트도 빠르게 최신화 해 두도록 하겠습니다!

위 작업이 스트리밍을 위한 작업이었고

page 컴포넌트에 async를 제거하여 static page로 만들려고 하는 것인 줄 알았는데 오류가 발생하는 것 보면

동적함수가 있는 경우 async를 빼는 것은 불가하지만 스트리밍 작업이 가능한 것이죠?

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

Next.js의 15 버전을 사용하면서 searchParams의 비동기 처리 문제와 관련된 오류가 발생하셨군요. 이는 Next.js의 특정 버전에서 사용하는 방식이 조금 달라졌기 때문입니다. searchParams가 Promise 형태로 처리됨에 따라 발생하는 타입 오류는 익숙지 않을 수 있지만 이를 해결할 수 있는 몇 가지 방법이 있습니다.

문제의 원인

Next.js는 비동기적으로 데이터를 가져와야 하는 경우 타입이 Promise로 변경되었습니다. 따라서, searchParams를 직접 사용하려 하면 타입 오류가 발생할 수 있습니다. 비동기 데이터를 처리하는 컴포넌트 내에서 await나 then() 메서드를 사용해 searchParams를 처리해야 합니다.

해결 방법

동일한 문제가 발생할 수 있는 유사 질문과 해결책을 참조하세요:
- 4.1) 빌드 시 오류 질문 드립니다.: Next.js 15에서 useSearchParams를 사용할 때 발생하는 일반적인 오류와 그 해결 방안에 대해 설명하는 게시물입니다.

또한 searchParams를 처리하는 컴포넌트를 비동기 함수 형태로 작성하거나, .then()을 사용하여 값을 이용할 수 있습니다.

코드 수정 예시

아래 코드를 참고하여 수정해 보세요:

// 비동기 함수 내부에서 searchParams 사용
export default async function Page() {
  const searchParams = await getSearchParams(); // 예시 함수

  const q = await searchParams.q; // 올바른 비동기 처리
  return <div>Search Query: {q}</div>;
}

혹은

// searchParams.then() 사용 예시
searchParams.then((params) => {
  const q = params.q;
});

유사한 문제를 경험한 사용자의 다른 해결 방법을 통한 정보도 항상 유익합니다. 따라서, 여러 방법을 시도해 보시면서 환경에 맞는 최적의 해결책을 찾는 것이 도움이 될 것입니다.

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