NextJS 14.1 버전 이상에서 useSearchParams() should be wrapped in a suspense boundary at page 에러가 발생하는 경우 해결책

에러원인 및 해결책

기능을 추가하고 다시 빌드하는 중 갑자기 빌드 에러가 발생하였다.

 

해당 에러가 발생하는 이유는 useSearchParams() 가 클라이언트 컴포넌트에서 동작하는데, 보통 빌드 과정을 거치는 동안에는 자바스크립트 파일을 다운로드 하기 전 까지는 해당 훅을 사용하는 페이지 전체는 빈 페이지가 된다. 따라서 이 문제를 해결하기 위해 데이터 페칭이될 때 까지 대기하는 Suspense 컴포넌트로 감싸주어야 한다.

 

현재 나의 컴포넌트는 사용자가 비밀번호 찾기 시 입력하는 form 을 하나의 컴포넌트로 구성하고 있다. 즉, Suspense 를 적용하려면 해당 컴포넌트를 감싸주어야 한다.

// Form 컴포넌트
'use client'

import { useRouter, useSearchParams } from 'next/navigation'

export default function ResetPage() {
  const path = useSearchParams()

  return (
    <form
      ref={formRef}
      className="backdrop-blur-[5px] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)] bg-transparent max-w-[600px] w-full h-[370px] p-[10px] rounded-[5px] absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]"
      action={postResetPassAction}
    >
      <h2 className=" text-[1.5em] text-center my-[0.6em] mb-[0.8em] font-bold text-white">
        비밀번호 재설정
      </h2>
    </form>
  }
}

 

 

따라서 다음과 같이 Suspense 컴포넌트를 ResetForm 컴포넌트에 감싸주면 해결된다.

 

import { Suspense } from 'react'

export default function RestPage() {

  return (
        <Suspense>
        	<ResetForm/>
        </Suspense>
  )
}

 

 

참고자료

NextJS 공식문서 및 스택오버플로우

Missing Suspense boundary with useSearchParams

 

useSearchParams() should be wrapped in a suspense boundary at page "/404". · vercel next.js · Discussion #61654