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

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

Next.js에서 useSearchParams 관련 문제로 인해 build 시 에러가 발생하는 상황에 대한 질문을 주셨군요. 이 문제는 주로 useSearchParams가 비동기적으로 처리되면서 발생할 수 있는 오류입니다. React와 Next.js의 생태계를 처음 접하실 때는 이러한 오류가 발생하는 원인과 해결 방법을 이해하는 데 어려움이 있을 수 있습니다.

문제의 원인

Next.js 15 버전부터 useSearchParams는 비동기로 처리되어야 하는 데이터 패칭에 관련되어 있으며, 이는 다음과 같이 Suspense 컴포넌트로 감싸져야 합니다. 하지만, 비동기 방식으로 가져오는 방법이 현재 환경에 제대로 반영되고 있는지 다시 확인하는 것이 중요합니다.

해결 방법

Suspense 사용 방식과 useSearchParams의 비동기 처리 방식을 제대로 설정했는지 확인해 보세요. 다음은 일반적인 설정 예제입니다:

코드 예시

// Component.js
"use client";
import { Suspense, useSearchParams } from "next/navigation";

function SearchComponent() {
  const searchParams = useSearchParams();

  // Use 'searchParams' to get query parameters, for instance:
  const query = searchParams.get("query"); 

  return <div>Query: {query}</div>;
}

export default function Page() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <SearchComponent />
    </Suspense>
  );
}

체크리스트

• 비동기 컴포넌트 분리: useSearchParams를 사용하는 코드는 반드시 Suspense로 감싸야 합니다.
  
• Suspense 처리: Suspense의 fallback에 로딩 컴포넌트를 배치하여 비동기 컴포넌트가 로딩될 때 사용자 경험을 지원합니다.
  
• 정확한 import 사용: 다음 네비게이션 라이브러리는 특정한 경우에 따라 import 방법이 달라질 수 있어 최신 문서를 참고하십시오.
  

더 알아보기를 원하신다면

관련된 문제와 해결책을 소개하는 질문들은 다음과 같습니다:

• async 제거(영상내용) 후 searchParams 오류: 비슷한 문제를 해결한 질문으로 비동기 문제 해결에 참고가 될 수 있습니다.

• searchParams 및 params 의 사용법이 변경된 것 같습니다.: Next.js 버전 갱신에 따라 searchParams 사용법이 변경된 것에 대한 안내.

추가적인 정보나 코드 예제를 원하실 경우, 질문하시거나 공식 Next.js 문서를 참조하시는 것도 좋습니다.

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