useSearchParams() should be wrapped in a suspense boundary

2024年3月7日

Next.js14でuseSearchParams()を使うと以下のようなエラーが出ました。

 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
   Generating static pages (0/12)  [    ]
 ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/deposit". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

Error occurred prerendering page "/multi-value-system". Read more: https://nextjs.org/docs/messages/prerender-error

 ✓ Generating static pages (12/12) 

> Export encountered errors on following paths:
        /(auth)/deposit/page: /deposit

このエラーの原因と解決方法を紹介します。

原因: Suspenseで囲われていない

useSearchParams() が使われているページやコンポーネントがSuspenseで囲われていないため上記のエラーがでます。

SuspenseはReact18から実装された機能で、データ取得中ローディング状態の宣言的な記述を行います。

<Suspense> を使うことで、子要素が読み込みを完了するまでフォールバックを表示させることができます。

解決方法: layout.tsxでsuspenseを使ってPageを囲む

layout.tsxや親コンポーネントなどでSuspenseを使って囲む必要があります。

"use client";
import { useEffect, Suspense } from "react";
...

export default function Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  ...

  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <div className="flex-1 px-2">{children}</div>
      </Suspense>
    </div>
  );
}

参考

GitHub

useSearchParams() should be wrapped in a suspense boundary at page “/404”. · vercel next.js · Discus… Summary how to fix error useSearchParams() should be wrapped in a suspense boundary at page “/404”. Read more: https://nextjs.org/docs/messages/missing-suspense…