Next js 빌드 오류 : useSearchParams() should be wrapped in a suspense boundary at page "/search/result".

 

Suspense 태그 없이 검색 매개변수를 읽으면 useSearchParams() 전체 페이지가 클라이언트 측 렌더링에 적용됩니다. 이로 인해 클라이언트 측 JavaScript가 로드될 때까지 페이지가 비어 있을 수 있습니다.

 

이를 해결할 수 있는 가능한 방법

호출이 useSearchParams()Suspense 경계로 래핑되었는지 확인하세요.

'use client' 

import { useSearchParams } from 'next/navigation'
import { Suspense } from 'react' 

function Search() {  
	const searchParams = useSearchParams()   
	return <input placeholder="Search..." />
} 

export function Searchbar() {  
	return (    
		// You could have a loading skeleton as the `fallback` too    
		<Suspense>      
			<Search />    
		</Suspense>  
	)
}

이렇게 하면 페이지가 클라이언트 측 렌더링을 거부하지 않습니다.

 

비활성화

참고 : 이 기능은 Next.js 버전 14.x에서만 사용할 수 있습니다. 14 이상 버전을 사용 중이시라면 위의 방법으로 수정해 주세요.

이 규칙을 비활성화하는 것은 권장하지 않습니다. 하지만 필요한 경우 다음에서 missingSuspenseWithCSRBailout옵션을 설정하여 비활성화 할 수 있습니다 .falsenext.config.js

module.exports = { 
	experimental: {    
		missingSuspenseWithCSRBailout: false,  
	},
}

이 구성 옵션은 향후 주요 버전에서 제거될 예정입니다.