Next.js14 Suspense 오류

next.js

현재 15버전까지 나왔지만 호환성 이슈로 인해 14버전으로 프로젝트를 진행중이다.

지금 하고 있는 플젝 중에 겪은 일이다.

오류 내용은 코드블럭에 있다.

  Generating static pages (19/24)  
  [=   ] ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/". 
  Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

이 오류는 **useSearchParams()**가 Suspense로 감싸져 있지 않아서 발생한 것이다.. Next.js 13 이상부터는 useSearchParams 같은 훅이 클라이언트 컴포넌트에서만 동작하고, 클라이언트 렌더링 중에는 Suspense boundary가 필요하다고 알려주고 있다.

 

 

즉, useSearchParams를 쓰는 컴포넌트를 Suspense로 감싸주면 된다.

//기존
export default function Home() {
  return (
    <main className="mx-auto flex w-full max-w-[1200px] flex-col px-2 py-[59px] tablet:w-[744px] tablet:justify-start tablet:px-1.5 desktop:w-[1200px] desktop:px-0">
      <HeroSection />
        <SelectedType />
        <FilterSection />
      <Suspense fallback={<div>로딩중</div>}>
        <GatheringServer />
      </Suspense>
    </main>
  );
}

//수정 후
export default function Home() {
  return (
    <main className="mx-auto flex w-full max-w-[1200px] flex-col px-2 py-[59px] tablet:w-[744px] tablet:justify-start tablet:px-1.5 desktop:w-[1200px] desktop:px-0">
      <HeroSection />
      <Suspense fallback={<div>로딩중</div>}>
        <SelectedType />
        <FilterSection />
        <GatheringServer />
      </Suspense>
    </main>
  );
}