Next.js にて should be wrapped in a suspense boundary というビルドエラーが出た時の対応

最終更新日:

useSearchParams() を使用した時に下記ビルドエラーが出た。

useSearchParams() should be wrapped in a suspense boundary
Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

suspense boundary でラップすべき。
とのこと。

Read more を見ると React コンポーネントを使うらしい。

環境

  • Next.js v15 + App Router
  • React v19
  • TypeScript v5

対応

構成

/src
  ├ /app
  │   └ page.tsx
  └ /features
      └ /comp
          └ index.tsx

/src/features/comp/index.tsx

"use client"

import { useSearchParams } from "next/navigation"

export default function Comp() {
	const searchParams = useSearchParams()
	return <>some component</>
}

/src/app/page.tsx

以下だとビルドエラーが出る。

import Comp from "@/features/comp"

export default function Page() {
	return <><Comp/></>
}

<Suspense> - React を使う。

import { Suspense } from "react"
import Comp from "@/features/comp"

export default function Page() {
	return (
		<Suspense fallback={<>wait a minute</>}>
			<Comp/>
		</Suspense>
	)
}