Nextjs build 중 겪은 에러

문제상황

개인 프로젝트를 만들어 빌드를 할때 빌드 중에 에러가 나서 확인하였습니다.

Generating static pages (3/7)  [=   ] ⨯ useSearchParams() should be wrapped in a suspense boundary.

위의 에러가 발생하였습니다.

에러의 내용은 useSearchParams는 suspense로 감싸야 된다는 내용이 었습니다.

문제 해결

처음에는 어떤내용인지 정확히 몰라 조금 해맸지만 말 그대로 useSearchParams를 사용한 경우에 suspense로 컴포넌트를 감싸야 빌드시 에러가 발생하지 않는 다는 내용이 었습니다.

처음에는 useSearchParams쪽만 해결할려고 했지만 그걸 통해서 데이터를 api를 요청하는 과정이 있어서 그냥 페이지에 있는 내용을 컴포넌트로 감싼 후 suspense로 감싸는 형식으로 해결하였습니다.

//기존의 페이지 안에 있던 코드를 컴포넌트 파일로 분리한 후
'use client';
import { useSearchParams } from 'next/navigation';

function ResultComponent() {
  const searchParams = useSearchParams();
  // 검색 파라미터를 사용하는 로직
}


// 컴포넌트를 Suspense로 감싸서 해결하였습니다.
import { Suspense } from 'react';

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

위의 예시코드처럼 해결하였습니다.

후의 suspense를 공부한 후 다시 정리하는 시간을 가져보도록 하겠습니다.