해결된 질문
작성
·
154
0
기존처럼 사용하면 빌드시 타입 오류가 나와서 따로 type을 Promise 로 만들어 사용해줘야 하는 듯합니다.
nextjs 링크도 첨부해두었습니다.
https://nextjs.org/docs/app/building-your-application/upgrading/version-15#params--searchparams
참고로 search/page.tsx 에서 searchParams 를 다음과 같이 타입 적용해주었더니 정상 빌드되었습니다.
type SearchParams = Promise<{ q?: string }>;
답변 2
0
안녕하세요 이정환입니다.
좋은 제보 감사합니다.
혹시 이전에 작성해주신 아래 질문과 다른 내용일까요?
동일한 내용으로 보이는데 이전 질문에 달린 답변을 혹시 확인하시지 못하셨을 까봐 질문드립니다.
확인 부탁드립니다 😃
0
안녕하세요, 인프런 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>;
}
이와 같이 적용함으로써 오류 없이 빌드를 진행할 수 있습니다.
다음 게시글들도 참고하여 더욱 깊이 있는 이해를 도울 수 있습니다:
useSearchParams
사용에 대한 문제 해결 방법Next.js 공식 문서도 유용하게 활용할 수 있으며, 버전 차이를 고려한 코드 수정을 진행할 때 많은 도움이 될 겁니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.