Next.js useSearchParams() Suspense 바운더리 누락 오류

// ...
export default function PaginatedList<T extends { title: string }>({
  items,
  itemsPerPage = 5,
  ItemComponent,
  className = "w-full",
  itemsContainerClassName = "flex flex-col",
}: PaginatedListProps<T>) {
  const router = useRouter();
  const searchParams = useSearchParams();
 
  //...
}

빌드 후 아래와 같은 에러가 발생.

이 오류는 Next.js 앱 라우터에서 발생하며, useSearchParams() 훅을 사용할 때 Suspense 바운더리 내에서 호출되지 않아 발생하는 것.

아래와 같이 Suspense 바운더리를 추가하여 해결함.

<Suspense>
  <PaginatedList<ArticlePreview>
    items={posts}
    itemsPerPage={5}
    ItemComponent={ArticleItem}
  />
</Suspense>

참조: Next 공식문서

Next.js useSearchParams() Suspense 바운더리 누락 오류

Error