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

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

현재 업데이트 내용 확인과정에 있으며 아마 금주 중으로 필요한 부분의 재 녹화가 진행될 것 같습니다.

그 전까지는 다음과 같이 코드 작성하시면됩니다.

export default async function Page({ // ①
  searchParams,
}: {
  searchParams: Promise<{ q: string }>; // ②
}) {
  const { q } = await searchParams; // ③

  return <div>{q}</div>;
}

① ③에서 await 키워드를 이용해 searchParams의 값을 불러와야 하므로 async를 사용함
② searchParams의 타입이 Promise로 감싸진 형태(비동기 형태)로 변경 됨
③ await 키워드를 통해 동기적으로 현재의 searchParams 값을 불러옴

params의 경우도 동일하게 작성하시면됩니다.

export default async function Page({ // ①
    params,
  }: {
    params: Promise<{ id: string }>; // ②
  }) {
    const { id } = await params; // ③
  
    return <div>{id}</div>;
  }

① ③에서 await 키워드를 이용해 params의 값을 불러와야 하므로 async를 사용함
② params의 타입이 Promise로 감싸진 형태(비동기 형태)로 변경 됨
③ await 키워드를 통해 동기적으로 현재의 params 값을 불러옴

추가적인 정보를 원하신다면 다음 공식문서 링크를 참고해보셔도 좋을 것 같습니다.

https://nextjs.org/docs/app/building-your-application/upgrading/version-15#params--searchparams

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

Next.js 15에서 searchParams와 params 사용이 변경되었다는 소식을 접하셨군요. Next.js의 경우 버전이 업데이트되면서 기존의 API나 기능 사용 방식이 변경될 수 있으며, 문서 링크를 제공해 주신 것처럼 API의 비동기 처리 방식 및 사용 방법에 대한 업데이트가 있을 수 있습니다.

변경 사항 및 수정 방법 안내

Next.js 15에서는 동적 경로에서 params와 searchParams를 사용하는 방법에 변화가 있을 수 있습니다. 이러한 경우 공식 문서에 설명된 변경 사항을 기준으로 수정해 나가시는 것이 좋습니다.

1. 공식 문서 참고: 제공해주신 Next.js 문서 링크에서 변경된 사항 및 방법을 상세히 살펴보시는 것이 먼저입니다. 해당 문서에서는 비동기 함수로의 전환 등을 통해 더 개선된 방식으로 API들을 다룰 수 있도록 가이드합니다.

2. 코드 수정: 코드를 업데이트할 때는 async/await 구문을 사용하여 비동기적으로 데이터를 처리하며, 그 과정에서 필요한 API 호출을 적절히 변경하는 방식으로 접근합니다.

3. 커뮤니티 및 포럼 확인: Next.js 커뮤니티나 관련 개발 포럼에서도 해당 업데이트에 관한 다양한 경험담과 해결책이 공유되고 있을 수 있습니다. 이러한 자료를 참고하여 문제 해결의 실마리를 얻을 수 있습니다.

유사 질문 및 답변 추천

아래의 기존 답변들이 도움이 될 수 있습니다. Next.js의 주요 변경 사항에 대한 대처 방법을 확인하세요.

• 4.1) 빌드 시 오류 질문 드립니다.

  • useSearchParams 관련 오류를 해결하는 방법에 대해서 다루고 있습니다.
    

• Dynamic API 관련 문제 해결 방법

  • Next.js가 버전 업데이트 후 API 사용에서 발생할 수 있는 문제와 그에 대한 해결 방법을 공유합니다.
    

변경 사항에 따르는 수정 작업이 필요할 때 가장 중요한 것은 업데이트된 공식 문서를 숙지하고, 관련 개발자 커뮤니티의 도움을 받으며 다양한 사용 사례를 검토하는 것입니다.

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