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

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

좋은 제보 감사합니다.

혹시 이전에 작성해주신 아래 질문과 다른 내용일까요?

동일한 내용으로 보이는데 이전 질문에 달린 답변을 혹시 확인하시지 못하셨을 까봐 질문드립니다.

확인 부탁드립니다 😃

https://www.inflearn.com/community/questions/1412572/searchparams-params-%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B6%80%EB%B6%84%EC%9D%B4-15%EC%97%90%EC%84%9C-%EB%B3%80%EA%B2%BD%EB%90%98%EC%97%88%EC%8A%B5%EB%8B%88%EB%8B%A4

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

Next.js 15 버전에서 searchParams 및 params 사용 방법이 변경되었다는 내용을 다루셨네요. Next.js의 업그레이드는 종종 API 변경을 포함하며, 이러한 변화는 타입스크립트와 같은 정적 타입 언어를 사용할 때 특히 민감하게 반영됩니다.

주요 변경사항 및 처리방법

Next.js 15에서는 params와 searchParams는 비동기적으로 데이터를 가져올 수 있도록 설계되었습니다. 따라서, Promise 형태로 반환값을 감싸야 하게 되었습니다.

기존 방식에서 변경된 방식

• 기존 방식: 비동기 처리가 없는 일반적인 객체를 직접 사용.
  
• 변경된 방식: 비동기 처리에 따라 Promise 객체로 감싸 변경된 값을 사용합니다.
  

코드 업데이트

다음과 같이 searchParams와 params를 비동기적 처리로 업데이트할 수 있습니다:

// search/page.tsx
export default async function Page({ searchParams }: { searchParams: SearchParams }) {
  const { q } = await searchParams;

  return <div>Search Query: {q}</div>;
}

이와 같이 적용함으로써 오류 없이 빌드를 진행할 수 있습니다.

유사 질문 및 참고 자료

다음 게시글들도 참고하여 더욱 깊이 있는 이해를 도울 수 있습니다:

• 4.1) 빌드 시 오류 질문 드립니다.: Next.js의 useSearchParams 사용에 대한 문제 해결 방법
  
• SSR실습 질문: 비동기 함수 사용 시 일반적인 오류와 그 해결 방법
  

Next.js 공식 문서도 유용하게 활용할 수 있으며, 버전 차이를 고려한 코드 수정을 진행할 때 많은 도움이 될 겁니다.

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