【Next.js】Missing Suspense boundary with useSearchParams 解消法

解消法

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 (
    <Suspense>
      <Search />
    </Suspense>
  )
}

原因

ルートが静的にレンダリングされる場合にuseSearchParamsを呼び出すと、最も近いSuspense境界までがクライアント側でレンダリングされます。
そのため、Suspenseで括らない場合にページ全体がクライアント側でレンダリングされるようになり、JavaScriptの読み込みが完了するまで空白のページが表示されてしまう可能性があります。
これを避けるため、静的レンダリングのルート内にuseSearchParamsが使用されていてSuspenseで括られていないコンポーネントが存在する場合にタイトルのエラーが発生します。