【Next.js】useSearchParams() should be wrapped in a suspense boundary at page の解決方法

はじめに

Next.jsでbuild時に発生したエラーについて、その原因と解決方法をまとめました。

この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです。

現象

Next.jsでuseSearchParams()を使っていたところ、以下のようなエラーがビルド時に出力されました。

useSearchParams() should be wrapped in a suspense boundary at page 

このエラーは、useSearchParams()を使うコンポーネントが<Suspense>でラップされていないことが原因です。

解決方法

useSearchParams()を使用する際は、そのコンポーネントを<Suspense>で囲う必要があります。

今回の場合、useSearchParams()はHeaderコンポーネント内で使っていましたが、Headerコンポーネント内部でSuspenseを使ってもエラーは解消されませんでした。そのため、Headerを呼び出す側（親コンポーネント）でSuspenseを使う必要があります。

mport { Suspense } from "react";
import Header from "../header";

const App = () => {
  return (
    <>
      <Suspense> 追加
        <Header />
      </Suspense> 追加
    </>
  );
};

このようにすることで、ビルド時のエラーは解消されました。

終わりに

今後もこのような細かい挙動に注意しながら、ReactとNext.jsを深く理解していきたいと思います。

参考

『useSearchParams()はSuspenseを忘れるな！』Zenn