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

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

우리 강의의 3.2) 페이지 라우팅 설정하기 챕터의 8분 20초 경에 안내드렸듯이

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

따라서 searchParams.q가 아닌 await을 활용해 q를 꺼내오셔서 사용하시는 걸 권장드립니다.

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

Next.js 15 버전 이후, params와 searchParams의 타입이 Promise로 변경되었습니다. 이는 이들이 비동기적으로 데이터를 처리하기 위함이므로, 직접적으로 다룰 때에 await을 사용하여 값을 추출해야 합니다. 다음에서 자세히 설명드리겠습니다.

문제 해결 방법

1. Promise 타입 처리:
   searchParams가 Promise 타입으로 되어 있기 때문에, 값을 직접 사용하려면 await 키워드를 통해 비동기 처리 결과를 기다려야 합니다. 기본적인 처리는 다음과 같이 가능합니다.
   

   export default async function Page({ searchParams }: { searchParams: Promise<{ q?: string }> }) {
     const { q } = await searchParams;
     // q를 사용하여 코드 작성
   }

2. 타입 정의 업데이트:
   TypeScript의 타입 정의를 업데이트하여 Promise 객체를 수용하도록 업데이트했습니다. 예시 코드는 위에서 보신 코드와 같습니다. 이렇게 정의하면 TypeScript와의 타입 불일치를 방지할 수 있습니다.
   

관련 질문

비슷한 문제 해결을 위한 기존의 질문을 참고하시면 도움이 될 수 있습니다:

• 4.1) 빌드 시 오류 질문 드립니다.: useSearchParams 처리에 대한 방법과 Next.js의 특정 문제 해결 방안에 대한 논의입니다.

• checkFields, ‘default’>>() 에러?: Promise 타입 문제와 관련하여 해결 방법을 설명합니다.

위의 정보를 참고하셔서 문제를 해결해 보시고, 추가적으로 궁금한 점이 있거나 다른 문제가 발생하셨다면 언제든 질문해 주세요. 곧 지식공유자께서 추가적인 도움을 드릴 것입니다.

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